Have a scroll bar in drop down list HTML

Question

I am looking for a way to have a scroll bar in a drop-down list in HTML, such that if the drop-down list contains more than eg. 5 items, a scroll bar will appear for viewing the rest. This is because I will be forced to have some big lists. I have been googleing it for the past hours, but with no luck.

It needs to work for IE8+, FF and Chrome.

My list currently looks like this:

<select name="Select1" size="1">
<option value="">- Please select a name -</option>
<option value"volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="aston">Aston Martin</option>
<option value="alfa">Alfa Romeo</option>
</select>

I have tried using the following CSS within a Div, but that made no difference.

.myDropDown{
height: 60px;
max-height: 60px;
overflow-y: scroll;
}

Changing the "size" gives a big scroll-able table, which is not what I am after.

http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-70-78-metablogapi/1882.clip_5F00_image001_5F00_thumb.png is an appropriate image of what I'm after.

I have the possibility to use js, php and jQuery if needed, but the simpler the solution, the better.

//Ambrose

Solution

You need to give an 'id' to your tag.

it should be like this

HTML 5

 <select name="Select1" size="1" id="ddlCars">
 <option value="">- Please select a name -</option>
 <option value"volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="ford">Ford</option>
 <option value="toyota">Toyota</option>
 <option value="aston">Aston Martin</option>
 <option value="alfa">Alfa Romeo</option>
 </select>

CSS

#ddlCars {
    min-height:190px; 
    overflow-y :auto; 
    overflow-x:hidden; 
    position:absolute;
    width:300px;
    display: contents;
 }

Comments

[Ambrose]

The comment with bootply.com/86116 looks appropriate.. but I dont understand how to recreate this. There are a lot of CSS classes missing/that I cant find. Does this actually work in IE8?

[Ambrose]

No, because, like I said. That is not what I am after. "size" creates one big scroll-able list. I want a drop-down list.. with scroll in the options that drop down.

[David]

More precisely, the 'size' parameter says how many of the entries to make visible. (So if select has 20 entries, you have want to have just 5 of them visible. As a side-effect, browsers SHOULD then add a scroll bar, but some browsers don't seem to. (Android's Chrome ignores the size, and forces size down to one entry visible.)