How do I change the font-size of an element within <select>?

Question

I have built this fiddle as an example of what I am doing.

What I am trying to do works fine in Firefox. With the font-size being 14px when you open

Answer 1

Like most form controls in HTML, the results of applying CSS to and elements vary a lot between browsers. Chrome, as you've found, won't let you apply and font styles to an 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

element, so to achieve the result you want you can wrap all the s in an 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/

0 讨论(0)

查看其它3个回答

发布评论: