Change HTML dropdown option font size [duplicate]

Question

I have this simple HTML dropdown menu:

<select>
    <option style="font-size:50px;">Test</option>
</select>

I can't find a way to increase the font size of the option. The font-size property is being ignored for some reason. Is this a bug or what?

Thanks

Answer 1

Have you tried putting it on your <select> element?

<select style="font-size:50px;">
    <option>Test</option>
</select>

fiddle: http://jsfiddle.net/tCw8M/

Or with a stylesheet:

select {
   font-size: 50px;
}

fiddle: http://jsfiddle.net/tCw8M/2/

Answer 2

The font size option needs to be on the select tag, not the option tag:

<select style="font-size:50px;">
     <option >Test</option>
</select>

Whether you do it directly to the tag or in a css file selecting the tag is up to you.

Answer 3

You should turn off the default OS styling with: -webkit-appearance: none;

DEMO here

Answer 4

You have to apply the style in select not in option like:

select{
    font-size:50px;
}

fiddle