Have a scroll bar in drop down list HTML

问题:

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

回答1:

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;
 }

回答2:

You cannot change the built-in behaviour of the SELECT element. You may want to consider a JS-based alternative, such at Twitter Bootstrap.

回答3:

Perhaps I'm missing something but isn't that what the size attribute is for?

JSfiddle

<select name="Select1" size="6">
<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>