CODEWITHSUNDEEP
htmlcssselectbackground
sv_in
sv_in

Reputation: 14049

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

enter image description here

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.

Upvotes: 4

Views: 14948

Answers (2)

Simon
Simon

Reputation: 354

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

Upvotes: 4

Kyle
Kyle

Reputation: 67244

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 :)

Upvotes: 6

Related Questions