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