How to set the max amount of items to show in an HTML select box

Question

Hi everyone,

I have a <select> box with some year numbers in them, ranging 50 years back, and currently when I click on the box the options will reach to the very bottom of the screen, is there any way to set the max amount of options a select box should show before resorting to a scroll bar to show the rest? I could not find anything about this on Google, the only thing that came close is the size attribute, which is really not what I want.

Answer 1

No that is not possible.

You could do some tricky JavaScript/AJAX stuff but there usually is a better solution. ;)

Answer 2

I believe the reason why you can't do that (sorry) is that these are usually implemented as OS native controls, which also means they behave differently in different browsers/platforms.

Answer 3

It's possible to get a similar effect with Javascript. Is this any closer for you?

<select id="mySelect" 
            onfocus="this.size=4" 
            onblur="this.size=1"
            onmouseleave="this.size=1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

Your non-javascript users will still get the huge drop down though of course.

Answer 4

@Aistina - your question refers to pure CSS and HTML.
As teknohippy and Lennart wrote, if you can\want to include JavaScript you can get the desired effect.
You can build your own select or textbox (example) or use controls to do that (example)