Change select box option background color
You need to put background-color
on the option
tag and not the select
tag...
select option {
margin: 40px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
If you want to style each one of the option
tags.. use the css attribute
selector:
select option {
margin: 40px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
select option[value="1"] {
background: rgba(100, 100, 100, 0.3);
}
select option[value="2"] {
background: rgba(150, 150, 150, 0.3);
}
select option[value="3"] {
background: rgba(200, 200, 200, 0.3);
}
select option[value="4"] {
background: rgba(250, 250, 250, 0.3);
}
<select>
<option value="">Please choose</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
I don't know if you've considered it or not but if your application is based on coloring various groupings of items you should probably use the <optgroup>
tag coupled with a class for further referencing. For example:
<select>
<optgroup label="Numbers" class="green">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
<optgroup label="Letters" class="blue">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</optgroup>
</select>
and then in the head of your document write the css like this:
<style type="text/css">
.green option{
background-color:#0F0;
}
.blue option{
background-color:#00F;
}
</style>
Yes, you can set this by the opposite way:
select { /* desired background */ }
option:not(:checked) { background: #fff; }
Check it working bellow:
select {
margin: 50px;
width: 300px;
background: #ff0;
color: #000;
}
option:not(:checked) {
background-color: #fff;
}
<select>
<option val="">Select Option</option>
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>