How do I change the font-size of an Flimm Jul 08 '20 at 12:29

Question

Like most form controls in HTML, the results of applying CSS to <select> and <option> elements vary a lot between browsers. Chrome, as you've found, won't let you apply and font styles to an <option> element directly --- if you do Inspect Element on it, you'll see the font-size: 14px declaration is crossed through as if it's been overridden by the cascade, but it's actually because Chrome is ignoring it.

However, Chrome will let you apply font styles to the <optgroup> element, so to achieve the result you want you can wrap all the <option>s in an <optgroup> and then apply your font styles to a .styled-select optgroup selector. If you want the optgroup sans-label, you may have to do some clever CSS with positioning or something to hide the white area at the top where the label would be shown, but that should be possible.

Forked to a new JSFiddle to show you what I mean:

http://jsfiddle.net/zRtbZ/

score 17 · Answer 1 · answered Apr 05 '13 at 09:35

Like most form controls in HTML, the results of applying CSS to <select> and <option> elements vary a lot between browsers. Chrome, as you've found, won't let you apply and font styles to an <option> element directly --- if you do Inspect Element on it, you'll see the font-size: 14px declaration is crossed through as if it's been overridden by the cascade, but it's actually because Chrome is ignoring it.

However, Chrome will let you apply font styles to the <optgroup> element, so to achieve the result you want you can wrap all the <option>s in an <optgroup> and then apply your font styles to a .styled-select optgroup selector. If you want the optgroup sans-label, you may have to do some clever CSS with positioning or something to hide the white area at the top where the label would be shown, but that should be possible.

Forked to a new JSFiddle to show you what I mean:

http://jsfiddle.net/zRtbZ/

no longer works on Chrome 109 :( – andy mccullough Feb 25 '23 at 12:58 — andy mccullough, Feb 25 '23 at 12:58

score 4 · Answer 2 · answered Apr 05 '13 at 09:22

4

.service-small option {
    font-size: 14px;
    padding: 5px;
    background: #5c5c5c;
}

I think it because you used .styled-select in start of the class code.

answered Apr 05 '13 at 09:22

ExCluSiv3

184
2
20

4

the setting of option font-size doesn't work for me :( – Sam Jun 13 '20 at 12:12

score 3 · Answer 3 · answered Oct 18 '22 at 15:13

I know this is an old question but none of these worked for me on Safari in 2022.

I used this:

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px;
    font-size: 20px;
}

After the first 3 lines, all the css worked for me.

score 1 · Answer 4 · answered Feb 24 '22 at 00:51

For me, I applied the style to the <option> tag directly.

For exmaple, I was creating my own text editor and I want to show a select menu to select the header type. I want to show each option with the font-size of each option. For example, if the first option is Header 1, then I want the word Header 1 in h1 font size. So, I used the class h1 of bootstrap directly on the option tag.

<option value="h1" class="h1"> Header 1 </option>

How do I change the font-size of an Flimm Jul 08 '20 at 12:29

Linked

Related