How to add vertical scrollbar to select box options list?

问题

I need vertical scrollbar for select box options list. I have to show only first few items of the list. I don't have any control over number of items in the list.

I have checked all similar questions here and nothing worked out. Anyway to do that?

.wrapper{
width:200px;
padding:20px;
height: 150px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="wrapper" ><select name="" id="" class="form-control">
        <option value="">One</option>
        <option value="">Two</option>
        <option value="">Three</option>
        <option value="">Four</option>
        <option value="">Five</option>
        <option value="">Six</option>
        <option value="">Seven</option>
        <option value="">Eight</option>
        <option value="">Nine</option>
        <option value="">Ten</option>
    </select></div>

回答1:

Overflow-y doesn't work on select boxes. What I would recommend using is size on your select box. In my example I've used 5 as the value, you can obviously change this to your liking.

.wrapper{
width:200px;
padding:20px;
height: 150px;
}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    
    <div class="wrapper"><select name="" id="" class="form-control" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
    <option value="">One</option>
    <option value="">Two</option>
    <option value="">Three</option>
    <option value="">Four</option>
    <option value="">Five</option>
    <option value="">Six</option>
    <option value="">Seven</option>
    <option value="">Eight</option>
    <option value="">Nine</option>
    <option value="">Ten</option>
</select></div>

Edit: Amended my answer to include some js to provide OP with the desired result.

回答2:

Try something like this (Replace the number 3 with the number of items you would like to show):

    <select onfocus='this.size=3;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
    </select>

回答3:

Just add size attribute in your select. For ex:- size="5"

.wrapper{
width:200px;
padding:20px;
height: 150px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="wrapper" >
<select size="5" name="" id="" class="form-control">
        <option value="">One</option>
        <option value="">Two</option>
        <option value="">Three</option>
        <option value="">Four</option>
        <option value="">Five</option>
        <option value="">Six</option>
        <option value="">Seven</option>
        <option value="">Eight</option>
        <option value="">Nine</option>
        <option value="">Ten</option>
    </select></div>

回答4:

You can just give size , it will work somehow.

 <select size="5">
 // all your option comes here
</select>

来源：https://stackoverflow.com/questions/48560072/how-to-add-vertical-scrollbar-to-select-box-options-list

标签

javascript

jquery

css

html

twitter-bootstrap