Set number of options shown in a <select multip

Question

< select size="2" multiple>
    < option value="1">1< /option>
    < option value="2">2< /option>
    < option value="3">3< /option>
    < option value="4">4< /option>
    < option value="5">5< /option>
    < option value="6">6< /option>
    < option value="7">7< /option>
    < option value="8">8< /option>
    < option value="9">9< /option>
    < option value="10">10< /option>
    < option value="11">11< /option>
    < option value="12">12< /option>
    < option value="13">13< /option>
< /select>

size attribute of Select tag is not working properly in Safari.

if size attribute's value is greater than four then there have no problem, its working. But when I set the value of size less than four then it show four values.

above example displays four options in safari but I want two options. What is the reason for this ?

Answer 1

I'm not sure what the reason is, but you can style the element using height. Unfortunately, this makes it awkward to get it to look the same in each browser, although the example below looks close enough:

http://jsfiddle.net/D7ugW/

Answer 2

use:

height: calc(2em + 30px);