Question

I would like to color (i.e. highlight as erroneous) a select element, but not its option tags. In FF I achieve this by applying a style to the select element and applying another style to the option tags. Here are the styles:

.highlight{
    background-color: #FB6F6E;
}

.highlight > option{
    background: #dfdfdf;
}

This looks as I want in FF (16.0.1),

but in IE8 (quirks mode) all options are colored:

So is there a way to achieve this in IE8?

EDIT I would preferably use something that does not involve giving classes to option tags or using javascript. I know those solutions work, but it feels sort of a hack. Maybe the DOCTYPE issue solves the problem, I just wonder if adding a DOCTYPE would alter the current design.

EDIT As some of you suggested, I have added a DOCTYPE (HTML 4.01 Transitional). IE8 is still in quirks mode, but the selectbox is rendered a little bit differently:

The border of the select is red, but still not the whole selectbox. Any ideas?

Answer 1

Unfortunately I could not find a solution (that does not use javascript) for this problem.
The client accepted the selectboxes as they are.