Why does my select box refuse to change background color in Firefox?

Question

I've looked very carefully for an answer to this question for hours and have not been able to come up with one.

I have a select box that changes background color based on the background color of the selected option. This feature works in Chrome but not in Firefox, where it just turns blue and stays blue regardless of which option you choose. The selected option's text appears in the select but not the background color.

I've already tried using css like ::selected {}. The closest I've come is using a different StackOverflow answer to create a shadow box or to change the color when the focus changes, but no real luck so far.

Here is my code:

CSS:

#WHITE  {background-color: white;}
#GRAY   {background-color: rgb(194,194,194);}
#PINK   {background-color: rgb(255,153,203);}
#YELLOW {background-color: rgb(254,255,153);}
#ORANGE {background-color: rgb(255,204,154);}

jQuery:

$(document).ready( function () {
    var color = $("option:selected", "#colorSlct").css("background-color");
    $("#colorSlct").css ("background-color", color);
});
$(document).on('change', '#colorSlct', function () {
    var color1 = $("option:selected", this).css("background-color");
    $("#colorSlct").css ("background-color", color1);
});

csp:

<select id = "colorSlct" type = "select" class = "select2" style = "margin-left: 0;">
    <option id = "WHITE">  </option>
    <option id = "GRAY" #($s(color="GRAY":"selected='selected'",1:""))#> Gray </option>
    <option id = "PINK" #($s(color="PINK":"selected='selected'",1:""))#> Pink </option>
    <option id = "YELLOW" #($s(color="YELLOW":"selected='selected'",1:""))#> Yellow </option>
    <option id = "ORANGE" #($s(color="ORANGE":"selected='selected'",1:""))#> Orange </option>
</select>

Any tips would be appreciated. Thanks very much for your help.

Answer 1

This seems to be that when Firefox selects an option, it sets its background-color to blue, to highlight the selection using CSS. You can see this by clicking on the drop-down arrow and seeing that the selected element is indeed blue. (This is probably done via a different mechanism in other browsers, hence the difference in behavior)

So, whenever you get the background-color of the selected element it will always return blue - rgb(51, 153, 255).

The workaround is to use some other hint to tell you what color to use.

If you change the ID's to classes, you can do this:

function changeSel() {
    var selected = $("option:selected", "#colorSlct");
    $("#colorSlct").removeClass().addClass(selected[0].className);
}

changeSel()

$(document).on('change', '#colorSlct', changeSel);

Demo: http://jsfiddle.net/jtbowden/63fnozyw/3/

Of course, this assumes that the options will only have a single class. You could also use the ID to do a lookup, or use both class/ID:

function changeSel() {
    var selected = $("option:selected", "#colorSlct");
    $("#colorSlct").removeClass().addClass(selected.attr("id"));
}

changeSel()

$(document).on('change', '#colorSlct', changeSel);

CSS:

#WHITE, .WHITE {
    background-color: white;
}
#GRAY, .GRAY {
    background-color: rgb(194, 194, 194);
}
// etc, etc

Demo: http://jsfiddle.net/jtbowden/63fnozyw/4/