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        x000D   x000D   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    x000D   lt div class  styled-select  gt       lt select class  service-area  name  service-area  gt           lt option selected  selected  class  service-small  gt Service area  lt  option gt           lt option class  service-small  gt Volunteering lt  option gt       lt option class  service-small  gt Partnership  amp amp  Support lt  option gt           lt option class  service-small  gt Business Services lt  option gt       lt  select gt   lt  div gt  x000D   x000D   x000D

User · Answer

service-small option       font-size  14px      padding  5px      background   5c5c5c      I think it because you used  styled-select in start of the class code

User · Answer

Like most form controls in HTML  the results of applying CSS to  lt select gt  and  lt option gt  elements vary a lot between browsers  Chrome  as you ve found  won t let you apply and font styles to an  lt option gt  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  lt optgroup gt  element  so to achieve the result you want you can wrap all the  lt option gt s in an  lt optgroup gt  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

User · Answer

One solution could be to wrap the options inside optgroup   x000D   x000D  optgroup   font-size 40px    x000D   lt select gt     lt optgroup gt       lt option selected  selected  class  service-small  gt Service area  lt  option gt       lt option class  service-small  gt Volunteering lt  option gt       lt option class  service-small  gt Partnership  amp amp  Support lt  option gt       lt option class  service-small  gt Business Services lt  option gt     lt  optgroup gt   lt  select gt  x000D   x000D   x000D

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

Examples related to html

Examples related to css