Change HTML dropdown option font size

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

Turn off the default OS styling...see details in my last edited answer.This will surely work. — Krupal Shah, Jul 15 '14 at 15:42
In comments (and only in comments) you are saying that specifically sizes larger than 16px do not work. You need to specify the browser(s) tested and provide a reproduceable case. Some browsers do not let you style `option`, just `select`, but that’s a different issue (and well covered in old SO questions and answers). — Jukka K. Korpela, Jul 15 '14 at 17:00

underbar · Answer 1 · 2014-07-15T15:29:49.640

10

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

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

Or with a stylesheet:

select {
   font-size: 50px;
}

edited Jul 15 '14 at 15:29

answered Jul 15 '14 at 15:21

underbar

It doesn't work as well like this for some reason. The same problem. The tag responds to a maximum of `font-size: 16px;` Higher than that value is not responding – Michael Samuel Jul 15 '14 at 15:26
Hmm that is weird that it works up to a point. Have you tried both ways? The inline style attribute and an external stylesheet? Are you using any 3rd party libraries / plugins? The fiddles are working just fine so there has to be something on your end. – underbar Jul 15 '14 at 15:27
The fiddle demonstrates the problem :) The text size appears much smaller than the defined 50px; – Michael Samuel Jul 15 '14 at 16:09
Are you using some measurable way of checking that or are you just saying it doesn't *look* like 50px to you? Because on my end the text-size are looking fine. Also what browser/version are you using? – underbar Jul 15 '14 at 16:19

score 3 · Answer 2 · answered Jul 15 '14 at 15:21

3

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.

answered Jul 15 '14 at 15:21

David Morin

It doesn't work as well like this for some reason. The same problem. The tag responds to a maximum of `font-size: 16px;` Higher than that value is not responding – Michael Samuel Jul 15 '14 at 15:24
Can you set any other element to a font size larger than 50px? – David Morin Jul 15 '14 at 15:29
i dont necessarily need 50px. The tag doesn't work after 16px anyways :) – Michael Samuel Jul 15 '14 at 16:06

score 3 · Accepted Answer · answered Jul 15 '14 at 15:35

3

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

answered Jul 15 '14 at 15:35

Krupal Shah

1

it's not working on latest Firefox. Any other idea? – Zakir_SZH Dec 04 '17 at 04:50

score 2 · Answer 4 · answered Jul 15 '14 at 15:20

2

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

select{
    font-size:50px;
}

answered Jul 15 '14 at 15:20

Alex Char

It doesn't work as well like this for some reason. The same problem. The tag responds to a maximum of `font-size: 16px;` Higher than that value is not responding – Michael Samuel Jul 15 '14 at 15:25
It works perfect. Maybe is something else. Can you provide a link? – Alex Char Jul 15 '14 at 15:28
Your link itself explains the problem :) The font size in the example fiddle can't by any means be 50px; 50px should be much more larger than this – Michael Samuel Jul 15 '14 at 16:07
Take a look here http://jsfiddle.net/eR4QN/1/ and see there is no difference in size. – Alex Char Jul 15 '14 at 16:12

score 1 · Answer 5 · answered Jul 15 '14 at 15:35

1

Put it in a stylesheet:

select{
font-size: 150px;

}

answered Jul 15 '14 at 15:35

rob

5 Answers5