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.

Does this help: http://stackoverflow.com/questions/16344583/style-select-element-based-on-selected-option ? — quw, Aug 27 '14 at 18:26
Not really. I don't necessarily want to edit it with CSS, although I could if that was the right approach. I'd really like to just create the correct jQuery function to accomplish this task. — user3281588, Aug 27 '14 at 19:07

Jeff B · Answer 1 · 2014-08-27T19:13:22.560

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/

Thanks very much for your response. It looks good, except that I tried it in Firefox and saw that it worked until I got to the last option (orange). After clicking that and having it turn orange, clicking the other ones did not change the background anymore. It will remain orange after turning orange once. Any resolutions? Thanks in advance. — user3281588, Aug 27 '14 at 18:54
Actually, just looked at it again. It will always retain the background color of any option that has already been clicked that appears later in the select. Can anyone help? — user3281588, Aug 27 '14 at 19:04
I know why... because I am not removing the previous classes applied to the option. Need to add `removeClass()` first. See edits above. Sorry about that. — Jeff B, Aug 27 '14 at 19:10

Tricky12 · Answer 2 · 2014-08-28T01:51:37.327

1

Make classes with the same name as your IDs, then whenever your select is changed, use the id to add the class with the corresponding name - after removing all prior classes of course.

Give this a try: JSFiddle Demo

JQuery

$(document).on('change', '#colorSlct', function() {
    $(this).removeClass().addClass($('option:selected').attr('id'));
});

CSS

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

EDIT:

To get it to work if the dropdown is filled when the page loads, you can add this code to select the id of the selected option and add its class.

var loadedColor = $('#colorSlct').find('option:selected').attr('id');
$('#colorSlct').addClass(loadedColor);

Updated Demo

edited Aug 28 '14 at 01:51

answered Aug 27 '14 at 19:09

Tricky12

6,752
1
27
35

A few questions: Why does this code work in Fiddle but not in my coding when I copy and paste it exactly? Also, I see that in your Fiddle html you have two "."s in place of two "#"s in the gray option: is this intentional? And if so, why? – user3281588 Aug 27 '14 at 19:43
I'm not sure how the "."s got in place of the "#"s, that was not intentional. I'm also not sure why it would work in Fiddle but not your code. The only thing I can think of is that you aren't wrapping your jQuery in `$(document).ready(function() {...}` or you have a different jQuery version that is acting differently for some reason. – Tricky12 Aug 27 '14 at 19:56
Or, if you have more than one dropdown on your page - `$('option:selected')` could be selecting the wrong dropdown, and therefore will break this. You could use `$(this).find('option:selected')` if this is the case. – Tricky12 Aug 27 '14 at 20:05
I wrapped the code in $(document).ready... and am still having trouble. I am using the following version of jquery: "text/javascript" src="includes/jquery-1.7.1.min.js"> Also, can I have two different $(document).ready wraps? – user3281588 Aug 27 '14 at 20:15
OK, thanks. The $(this).find('option:selected') worked! It finally works after hours and hours of playing around with it! Thanks so much. The only thing left is this: When the page loads, the background is white even if a color is selected. I know this is connected to how it's wrapped in terms of $(document).ready and $(document).on, but need assistance to get it working. Right now .on is inside .ready. – user3281588 Aug 27 '14 at 20:51
@user3281588 No problem! I updated my answer with a resolution to your last problem. Let me know if it doesn't work for you. – Tricky12 Aug 28 '14 at 01:52
@user3281588 No problem, glad it is working for you! – Tricky12 Aug 28 '14 at 14:30

score 0 · Answer 3 · answered Jan 04 '21 at 13:50

As @Jeff B indicated this is a FireFox flaw, this is the solution I found for FireFox:

The fast workaround I usually use is to use the value attribute as the color that I want to paint the select with, the problem I have currently is that my select options are dynamically loaded from a database and therefore I need the value attribute to know which option was selected by the user.

I came up with this JavaScript/jQuery for my specific case:

$('#mySelectID').change(function (){
    $('#mySelectID').css('background-color',document.getElementById('mySelectID').options[$('#mySelectID').val() - 1].style.backgroundColor);
});

In my case the value is a number, should yours be other values, then find by the selected index rather than the value.

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

3 Answers3