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

Question

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.

Answer 1

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.