How do you set the background color of an item in an HTML list?
Asked
Active
Viewed 1.6e+01k times
4 Answers
24
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>
Flimm
- 136,138
- 45
- 251
- 267
-
1why use `>` ? ` – nickf May 07 '10 at 15:38
-
can you make text inside – Bakhtiyor Jun 10 '10 at 20:10
-
7This solution still doesn't work in Chrome and Safari. – dguay Aug 14 '14 at 14:58
-
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 `, but no visual color changes (Chrome @ Mac Os) – pilat Nov 06 '16 at 18:50
24
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>
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;
}
Karl Stulik
- 961
- 1
- 12
- 24
0
Just like normal background-color: #f0f
You just need a way to target it, eg: <option id="myPinkOption">blah</option>
nickf
- 537,072
- 198
- 649
- 721