Sometimes, we want to change the selected option background-color CSS style.
In this article, we’ll look at how to change the selected option background-color CSS style.
How to change the selected option background-color CSS style?
To change the selected option background-color CSS style, we can set the style attribute of the select and option elements.
For instance, we write:
<select style="background: #009966; color: #FFF;">
<option value='0' style="background: white; color: black;">Protect my email</option>
<option value='1' style="background: white; color: black;">Show email on advert</option>
</select>
to set the whole select element to background color 009966 and color FFF.
Then we override the the styles in the option elements with style="background: white; color: black;".
As a result, we see that the selected item has a green background and white text and the options have black text and a white background.
Conclusion
To change the selected option background-color CSS style, we can set the style attribute of the select and option elements.
