How can I change the font-size of a select option

Question

I am trying to style a select option dropdown list  Is it possible to make the font-sizes of the options different from the default value  For example  the default   -- Select Country --     Would be size 7pt  and one of the options   Georgia   Would be size 13pt   This is my dropdown list    x000D   x000D   select join   x000D    width  170px  x000D    height  28px  x000D    overflow  hidden  x000D    background  url  http   s24 postimg org lyhytocf5 dropdown png   no-repeat right  FEFEFE  x000D    border   FEFEFE 1px solid  x000D    -webkit-border-radius  3px  x000D    border-radius  3px  x000D    -webkit-box-shadow  inset 0px 0px 10px 1px  FEFEFE  x000D    box-shadow  inset 0px 0px 10px 1px  FEFEFE  x000D    x000D   select join select   x000D    background  transparent  x000D    width  170px  x000D    font-size 7pt  x000D    color grey  x000D    border  0  x000D    border-radius  0  x000D    height  28px  x000D    -webkit-appearance  none  x000D    x000D   select join select focus   x000D    outline  none  x000D    x000D   lt div style  background-color pink height 150px  text-align center   gt  x000D     lt br  gt  x000D     lt div class  select join  style  margin-left 15px  gt  x000D       lt select name  txtCountry  gt  x000D         lt option gt -- Select Country -- lt  option gt  x000D         lt option value  1  gt Georgia lt  option gt  x000D         lt option value  2  gt Afghanistan lt  option gt  x000D       lt  select gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    See also my demo on JSFiddle   Unfortunately  it works only on Firefox  Could it be that others browser don t support styling of  lt option gt  elements   Browsers I tested on    Chrome  Version 27 0 1453 116 m IE  10 Firefox  22 0

User · Answer

check this fiddle   i just edited the above fiddle  its working  http   jsfiddle net narensrinivasans FpNxn 1    selectDefault   selectDiv option       font-family arial      font-size 12px

User · Answer

We need a trick here    Normal select-dropdown things won t accept styles  BUT  If there s a  quot size quot  parameter in the tag  almost any CSS will apply  With this in mind  I ve created a fiddle that s practically equivalent to a normal select tag  plus the value can be edited manually like a ComboBox in visual languages  unless you put readonly in the input tag   A simplified example   lt style gt          only these 2 lines are truly required         stylish span  position relative        stylish select  position absolute left 0px display none          now you can style the hell out of them         stylish input                 stylish select                stylish option                stylish optgroup           lt  style gt       lt div class  quot stylish quot  gt       lt label gt  Choose your superhero   lt  label gt       lt span gt           lt input onclick  quot   this  closest  div   find  select   slideToggle 110  quot  gt           lt br gt           lt select size 15 onclick  quot   this  hide   closest  div   find  input   val   this  find  option selected   text     quot  gt                lt optgroup label  quot Fantasy quot  gt  lt  optgroup gt               lt option value  quot gandalf quot  gt Gandalf lt  option gt               lt option value  quot harry quot  gt Harry Potter lt  option gt               lt option value  quot jon quot  gt Jon Snow lt  option gt                lt optgroup label  quot Comics quot  gt  lt  optgroup gt               lt option value  quot tony quot  gt Tony Stark lt  option gt               lt option value  quot steve quot  gt Steven Rogers lt  option gt               lt option value  quot natasha quot  gt Natasha Romanova lt  option gt            lt  select gt       lt  span gt       lt  --          For the sake of simplicity  I used jQuery here          Today it s easy to do the same without it  now         that we have querySelector    closest    etc       -- gt   lt  div gt   A live example  https   jsfiddle net 7ac9us70 1052  Note 1  Sorry for the gradients  amp  all fancy stuff  no they re not necessary  yes I m showing off  I know  hashtag onlyhuman  hashtag notproud  Note 2  Those  lt optgroup gt  tags don t encapsulate the options belonging under them as they normally should  this is intentional  It s better for the styling   the well-mannered way would be a lot less stylable   and yes this is painless and works in every browser

User · Answer

Add a CSS class to the  lt option gt  tag to style it  http   jsfiddle net Ahreu   Currently WebKit browsers don t support this behavior  as it s undefined by the spec  Take a look at this  How to style a select tag s option element

User · Answer

Tell the option element to be 13pt  select option      font-size  13pt      and then the first option element to be 7pt  select option first-child       font-size  7pt      Running demo  http   jsfiddle net VggvD 1

User · Answer

select value  value       background-color  red     padding  3px     font-weight bold

User · Answer

try this  http   jsfiddle net VggvD 2   CSS add your code   select join option      font-size 13px

[css] How can I change the font-size of a select option?

Examples related to css

Examples related to html-select

Examples related to font-size