Question

I have a basic html select:

<select>
    <option value="1">Apple</option>
    <option value="2">Banana</option>
    <option value="3">Grape</option>
</option>

I want to set the background colour of each option to a different one. For instance, Apple is red, Banana is yellow and Grape is purple. By initiating a drop down, I will see the different colours in each option.

Is it possible to achieve the above with CSS3/HTML5 on the latest Firefox and Webkit(Chrome and Safari) browsers?

NOTE: Can you test your solutions on both the latest Firefox and Chrome, possibly on the Mac? I’m aware of the background colour method but it only works in Firefox on the Mac.

Answer 1

Is it not just as easy as this? http://jsfiddle.net/d8p8Q/

<select>
    <option value="1" style="background:red">Apple</option>
    <option value="2" style="background:yellow">Banana</option>
    <option value="3" style="background:purple">Grape</option>
</select>

Am I missing something here?

Safari           Chrome           (and I’m using Windows 7)

“Grape” is blue because that’s the one I’m hovering over. I don’t think it’s possible to change that blue “selected” colour using the native <select> element.

If that’s what you’re after doing, you’ll have to swap out the <select>s with JavaScript replacements, such as these:

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/