How to style a select tag s option element

Question

I m trying to set the style of an option in a select dropdown menu in Google Chrome  It works in all browsers except IE9 and Chrome    x000D   x000D  option red   x000D      background-color   cc0000   x000D      font-weight  bold   x000D      font-size  12px   x000D      color  white  x000D    x000D   lt select name  color  gt  x000D       lt option class  red  value  red  gt Red lt  option gt  x000D       lt option value  white  gt White lt  option gt  x000D       lt option value  blue  gt Blue lt  option gt  x000D       lt option value  green  gt Green lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    Without using JavaScript  is there a way to set style to the options in Google Chrome  Once selected the background color does not display

User · Answer

This question is really multiple questions in one  They are different ways of styling something  Here are links to the questions within this question   font-family of an  lt option gt  element   Question  How to apply font family in HTML tag of select option   font-size of an  lt option gt  element   Question  How do I change the font-size of an  lt option gt  element within  lt select gt     background-color of an  lt option gt  element   Question  How can I set the background color of  lt option gt  in a  lt select gt  element    font-weight of an  lt option gt  element   Question  HTML font weight property on OPTION of HTML SELECT   color of an  lt option gt  element   Question  How do change the color of the text of an  lt option gt  within a  lt select gt

User · Answer

I have a workaround using jquery    although we cannot style a particular option  we can style the select itself - and use javascript to change the class of the select based on what is selected  It works sufficiently for simple cases    x000D   x000D     select potentially red   on  change   function     x000D   if    this  val     red     x000D      this  addClass  option red    x000D     else   x000D      this  removeClass  option red    x000D     x000D      x000D     select potentially red   each  function     x000D   if    this  val     red     x000D      this  addClass  option red    x000D     else   x000D      this  removeClass  option red    x000D     x000D      x000D   option red   x000D      background-color   cc0000   x000D      font-weight  bold   x000D      font-size  12px   x000D      color  white  x000D    x000D        lt script src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt  x000D   lt  -- The js will affect all selects which have the class  potentially red  -- gt  x000D   lt select name  color  class  potentially red  gt  x000D       lt option value  red  gt Red lt  option gt  x000D       lt option value  white  gt White lt  option gt  x000D       lt option value  blue  gt Blue lt  option gt  x000D       lt option value  green  gt Green lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    Note that the js is in two parts  the each part for initializing everything on the page correctly  the  on  change       part for responding to change  I was unable to mangle the js into a function to DRY it up  it breaks it for some reason

User · Answer

I actually discovered something recently that seems to work for styling individual  lt option gt  lt  option gt  elements within Chrome  Firefox  and IE using pure CSS   Maybe  try the following   HTML    lt select gt       lt option value  blank  gt Blank lt  option gt       lt option class  white  value  white  gt White lt  option gt       lt option class  red  value  red  gt Red lt  option gt       lt option class  blue  value  blue  gt Blue lt  option gt   lt  select gt    CSS   select       background-color  000      color   FFF     select         background-color  000      color  FFF     select   red      This  miraculously  styles the   lt option class  red  gt  lt  option gt   elements         background-color  F00      color  FFF     select   white       background-color  FFF      color  000     select   blue       background-color  06F      color  FFF      Strange what throwing caution to the wind does  It doesn t seem to support the  active  hover  focus  link  visited  after  before  though   Example on JSFiddle  http   jsfiddle net Xd7TJ 2

User · Answer

It s a choice  from browser devs or W3C  I can t find any W3C specification about styling select options though  not allowing to style select options   I suspect this would be to keep consistency with native choice lists   think about mobile devices for example    3 solutions come to my mind    Use Select2 which actually converts your selects into uls  allowing many things  Split your selects into multiple in order to group values Split into optgroup

User · Answer

Since version 49   Chrome has supported styling  lt option gt  elements with font-weight  Source  https   code google com p chromium issues detail id 44917 c22     New SELECT Popup  font-weight style should be applied       This CL removes themeChromiumSkia css    important  in it prevented to   apply font-weight  Now html css has  font-weight normal   and     important  should be unnecessary    There was a Chrome stylesheet  themeChromiumSkia css  that used font-weight  normal  important  in it all this time  It was introduced to the stable Chrome channel in version 49 0

User · Answer

Unfortunately  WebKit browsers do not support styling of  lt option gt  tags yet  except for color and background-color   The most widely used cross browser solution is to use  lt ul gt     lt li gt  and style them using CSS  Frameworks like Bootstrap do this well

[css] How to style a select tag's option element?

Examples related to css

Examples related to google-chrome

Examples related to html-select