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.

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

<select name="color">
    <option class="red" value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

Without using JavaScript, is there a way to set style to the options in Google Chrome? Once selected the background color does not display.

Answer 1

Unfortunately, WebKit browsers do not support styling of <option> tags yet, except for color and background-color.

The most widely used cross browser solution is to use <ul> / <li> and style them using CSS. Frameworks like Bootstrap do this well.

Answer 2

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

Answer 3

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.

$('select.potentially_red').on('change', function() {
 if ($(this).val()=='red') {
  $(this).addClass('option_red');
 } else {
  $(this).removeClass('option_red');
 }
});
$('select.potentially_red').each( function() {
 if ($(this).val()=='red') {
  $(this).addClass('option_red');
 } else {
  $(this).removeClass('option_red');
 }
});

.option_red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- The js will affect all selects which have the class 'potentially_red' -->
<select name="color" class="potentially_red">
    <option value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

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

Answer 4

I actually discovered something recently that seems to work for styling individual <option></option> elements within Chrome, Firefox, and IE using pure CSS.

Maybe, try the following:

HTML:

<select>
    <option value="blank">Blank</option>
    <option class="white" value="white">White</option>
    <option class="red" value="red">Red</option>
    <option class="blue" value="blue">Blue</option>
</select>

CSS:

select {
    background-color:#000;
    color: #FFF;
}

select * {
    background-color:#000;
    color:#FFF;
}

select *.red { /* This, miraculously, styles the '<option class="red"></option>' 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/

Answer 5

Since version 49+, Chrome has supported styling <option> 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.

Answer 6

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 <option> element:
  • Question: How to apply font family in HTML tag of select option
• font-size of an <option> element:
  • Question: How do I change the font-size of an <option> element within <select>?
• background-color of an <option> element:
  • Question: How can I set the background color of <option> in a <select> element?
• font-weight of an <option> element:
  • Question: HTML font weight property on OPTION of HTML SELECT
• color of an <option> element:
  • Question: How do change the color of the text of an <option> within a <select>?