Question

I simply am trying to add a color to the select item background within the select elm after a user makes a selection from the select elm. The result right now is that in firefox, the colors will change, but only during selection … after the selection has been made the background for the individual selection is still white.

This code works fine in IE but so far my efforts have been thuarted in FireFox. Any suggestions would help.

public static void PerformDDLBackgroundChange(SDropDownList ddl)
    {
        switch ((ComplianceLevel)int.Parse(ddl.SelectedValue))
        {
            case ComplianceLevel.Compliant:
                ddl.SelectedItem.Attributes.Add("class", "Compliant");
                break;
            case ComplianceLevel.OtherThanSerious:
                ddl.SelectedItem.Attributes.Add("class", "OtherThanSerious");
                break;
            case ComplianceLevel.Serious:
                ddl.SelectedItem.Attributes.Add("class", "Serious");
                break;
            case ComplianceLevel.Critical:
                ddl.SelectedItem.Attributes.Add("class", "Critical");
                break;
        }
        ddl.Update();
    }

P.s I made an equivalent javascript method and made some attempts at it, but the result is still the same. The background color of the item is changed … but only is visible when making a selection, NOT after the selection is made.

.Compliant { background-color : #8AC9FF; }

.OtherThanSerious { background-color: #C2FF87; }

.Serious { background-color: #FFBC43; }

.Critical { background-color: #FF6743; }

Answer 1

Ah I get it.

I don’t think there is any agreed standard for styling of select elements, it’s genarally seen as bad for usabilty to mess with default OS styles for it.

However you can change the color on the background if you attach your class directly to the select tag and not to the option tag. But behaviour is probably quite erratic across browsers.