Question

This won’t work:

<select size="2">
    <option>Mars</option>
    <option>Earth</option>
    <option>Jupiter</option>
</select>

http://jsfiddle.net/uteb6/

It’s not possible to set the size-attribute of select to 2 or 3. Any other value will work fine. Is there a solution? And why isn’t this possible?

Jquerys $('select').attr('size', '2'); won’t work either.

Tested with Safari 5.1.7

Answer 1

Seems like that behavior isn’t necessarily part of the specifications, at least in sitepoint:

If the size is set to “1”, or omitted entirely, the select will render as a pull-down list. If the value is greater than “1”, the select renders as list of options. If the value of the size attribute is lower than the number of option elements contained in the select list, the browser will display a scroll bar control to indicate that there are more options to view or action below

http://reference.sitepoint.com/html/select/size

You can use height css to adjust it though as you need.

http://jsfiddle.net/uteb6/10/