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 re

Solution 1:

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

it should be like this

HTML 5

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

CSS

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

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

Solution 3:

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

JSfiddle

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