Making a <select> show as a scrollable list with only one selection?

html, html-select

Solution

In my experience, `size="3"` does the trick: http://jsfiddle.net/pU39G/

<select size="3">  <!-- Note: I've removed the 'multiple' attribute -->
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Tested on Chrome 33 and Firefox 27. I still don't have Firefox 28, but if it doesn't work there, it seems to be a regression.

Problem

I have a `<select>` list that looks like this. ``` <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> ``` I want it to look like this. Now, this can be achieved with adding the `multiple` and `size` attributes. ``` <select multiple size="3"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> ``` But this also allows the user to select more than one element. Just `size="3"` doesn't work (at least in Firefox 28.0); it is displayed as a dropdown list. The specification here doesn't seem to include any attribute that could do the trick, although it does state that Browsers are not required to present a select elements as a scrolled list box. But is there any way to make it look how I want but still only allow a single selection? A simple enough workaround using JavaScript is also OK for me.

Original source