3

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!

Naryl
  • 1,878
  • 1
  • 10
  • 12
  • Could you set a jsfiddle to let us see whats going on? – A. Wolff Dec 12 '12 at 12:32
  • possible duplicate of [Can I force jQuery.css("backgroundColor") returns on hexadecimal format?](http://stackoverflow.com/questions/6177454/can-i-force-jquery-cssbackgroundcolor-returns-on-hexadecimal-format) – Rory McCrossan Dec 12 '12 at 12:32
  • 1
    and no, it's not a duplicate of returning hexa in the css call, this has nothing to do with it – Naryl Dec 12 '12 at 12:48
  • 2
    A quick work around: `$(document).ready(function(){ $("#doc1").change(function(){ var style=$(this).children(":selected").attr("style"); $(this).attr("style", style); }); });` - http://jsfiddle.net/qEPPC/2 – rickyduck Dec 12 '12 at 13:03

1 Answers1

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.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • hmmm I don't think I'm understanding you. Selecting a option does not change the select background, you have to code that, and that's what I did with that function. The only question here is what's making this code not work in firefox, where not only it does not work but also a weird blue color appears of nowhere. – Naryl Dec 14 '12 at 10:08
  • Selecting an option changes the background of the option. You're then asking the browser for the background color of the option... which it tells you. And that color is the blue color that selected options are shown with by default on your OS. The actual color will obviously depend on things like OS theme and whatnot. – Boris Zbarsky Dec 14 '12 at 19:15
  • have you looked at the jsFiddle? it's much easier to understand the weird behaviour there if you open it with chrome, then with firefox and see the differences – Naryl Dec 18 '12 at 16:56
  • Yes, I saw the fiddle. Try doing it with a ` – Boris Zbarsky Dec 18 '12 at 20:47
  • hmm ok I understand what you meant. Thx for the tip! – Naryl Dec 19 '12 at 11:41