How do I change the font-size of an <option> 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 up the select options.

However looking at it in Google Chrome it picks the inherited font-size of 34px.

I am ideally looking for the select options to be font size 14px.

Is this possible to do?

I am willing to make any relevant fixes in jQuery should they be required.

Thanks

Code Listed Below......

.styled-select {     overflow: hidden;     height: 74px;     float: left;     width: 365px;     margin-right: 10px;     background: url(http://i50.tinypic.com/9ldb8j.png) no-repeat right center #5c5c5c; }  .styled-select select {     font-size: 34px;     border-radius: 0;     border: none;     background: transparent;     width: 380px;     overflow: hidden;     padding-top: 15px;     height: 70px;     text-indent: 10px;     color: #ffffff;     -webkit-appearance: none; }  .styled-select option.service-small {     font-size: 14px;     padding: 5px;     background: #5c5c5c; }

<div class="styled-select">     <select class="service-area" name="service-area">         <option selected="selected" class="service-small">Service area?</option>         <option class="service-small">Volunteering</option>     <option class="service-small">Partnership &amp; Support</option>         <option class="service-small">Business Services</option>     </select> </div>

Answer 1

One solution could be to wrap the options inside optgroup:

optgroup { font-size:40px; }

<select>   <optgroup>     <option selected="selected" class="service-small">Service area?</option>     <option class="service-small">Volunteering</option>     <option class="service-small">Partnership &amp; Support</option>     <option class="service-small">Business Services</option>   </optgroup> </select>

Answer 2

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/