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.