Question

What I’m doing here is pretty simple:

When someone selects a option from a select I want to change that select’s background color to the selected option color.

$("select").change(function(){
    var newcolor=$(this).children("option:selected").css("background-color");
    $(this).css("backgroundColor", newcolor);
});

Easy right? Well it’s not working at all in Firefox 17.0.1 (it works in Chrome). The problem is the variable newcolor is filled with: rgb(51, 153, 255). The best part is this color is nowhere to be found in my code, css, or anything.

I’ve tried changing background-color to backgroundColor, children to find, nothing works.

The fun part is, if I do this:

$("select").change(function(){
    var newcolor=$(this).children("option:first").css("background-color");
    $(this).css("backgroundColor", newcolor);
});

And select the first option, instead of the selected one… it works!

I could make it work using some classes probably but I’m curious, why is this happening and is there any way to solve it?

EDIT: added a jsFiddle. Try it with chrome and firefox!

Answer 1

It’s happening because selecting an option changes its background color. You can see it as you select it. And it does that because there’s a rule in the user-agent stylesheet that styles the selected option with the “selected option” background color and color.