Question

Is it possible onHover to make HTML dropdown elements adopt a new background color that is unique for each dropdown element?

Take the following example:

<select>
<option value="China">
<option value="Holland">
<option value="France">
</select>

I know that you can alter styling according to an attribute’s value using CSS3 attribute selectors, in the browsers that support them:

option[value="China"] 
{
    background: red;
}

option[value="Holland"] 
{
    background: orange;
}

option[value="France"] 
{
    background: blue;
}

But this would change their default color. I don’t want to do that. I want all of these elements to retain their default background color of white in their resting state.

I only want the dropdown element to adopt its unique color on hovering over that element in the dropdown.

So, for example, on hovering over the “China” element, I would like China to have a red background color, and Holland and France would retain their white background color until they are hovered over – at which point Holland would become orange and France would blue.

Is this possible with CSS or jQuery?

Answer 1

You can’t do this, especially not cross-browser, the <select> element is notoriously unstyle-able. You can do a complete <select> replacement with a number of jQuery plugins, but you can’t do this with raw CSS on the original <select> element.

Here are some examples of replacements.