如何添加垂直滚动条以选择框选项列表？

Question

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>

Answer 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.

Answer 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>

Answer 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>

Answer 4

You can just give size , it will work somehow.

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