Changing the background color of the selected options in a select box

Question

I have to create a select box like this. I have been able to get this tree structure using optgroup but I am facing problems in changing the default background color of the selected option from default color to this orange color. I am aware of js solutions but I am more interested in pure HTML/CSS solution. It would be better if it will work in every browser, but no pressure ;)

Thanks in advance.

Solution 1

It is not possible to do this with HTML/CSS. The colors of the select elements are Operating System specific and so cannot be changed with CSS or HTML. Javascript solutions have been developed and they're (so far) the only way to do it :)

Solution 2

In Firefox you can use the css background-image property together with the :checked CSS pseudo-class selector to achieve it.

option:checked, option:hover {
    color: white;
    background: #488f8f repeat url("mycolor.gif");
}

You can find a css demo with a different color on my website www.speich.net

Comments

[John]

That only seems to work on select elements with the multiple attribute.

[Simon]

Currently, setting the background is possible also for Chrome 78 and Edge 42 (on Windows). As noted by John, this works only for Firefox and Chrome when the attribute multiple is set, in Edge it also works on the single select element.