How can I set the background color of <option> in a <select> element?

Question

How do you set the background color of an item in an HTML list?

Lyrate

Answer 1

select.list1 option.option2
{
    background-color: #007700;
}

<select class="list1">
  <option value="1">Option 1</option>
  <option value="2" class="option2">Option 2</option>
</select>

Ultrasonic

why use > ? <option> elements can only ever exist inside a select anyway – Mansur

can you make text inside <option> bold also with css? – Messeigneurs

This solution still doesn't work in Chrome and Safari. – Myrmidon

I would need to add the bg color programmatically, so, I can't really use classes. Something like this: ` try { opt_css.backgroundColor = item.color; // this might be not defined $opt.prop('disabled', item.disabled); // this too } catch(e) { // do nothing } ` As a result, I can see "style" attribute added to the <option> tag, like this: <option value="Status 1" style="padding: 2px; background-color: rgb(255, 204, 204);"> Status 1</option>, but no visual color changes (Chrome @ Mac Os) – Exponent

Answer 2

I assume you mean the <select> input element?

Support for that is pretty new, but FF 3.6, Chrome and IE 8 render this all right:

<select name="select">
  <option value="1" style="background-color: blue">Test</option>
  <option value="2" style="background-color: green">Test</option>
</select>

Winna

Answer 3

I had this problem too. I found setting the appearance to none helped.

.class {
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;

    background-color: red;
}

Urger

Answer 4

Just like normal background-color: #f0f

You just need a way to target it, eg: <option id="myPinkOption">blah</option>

Mansur