YUI3 FF retrieving selected option and its background-color property

Question

I'm trying to set the background-color of a Select element to the background-color of it's selected Option like so:

YUI().use('selector-css3', 'node', function(Y) {

        function set_color( e ) {
            this.setStyle('backgroundColor',this.one('option:checked').getStyle('backgroundColor'));
        };

        Y.on(['available','change'], set_color, '#id_linkcolor');
    });

Strangely this works perfectly in Chrome. In FF however it seems to always revert to a specific color. Even more weirdly, this:

this.setStyle('backgroundColor',this.get('options').item(3).getStyle('backgroundColor');

does seem to work. But when I use the selectedIndex to retrieve the selected option it doesn't work anymore.

Check it out here: http://jsfiddle.net/9sy02756/4/

Thanks!

UPDATE

I decided to approach this differently like this:

function set_color( e ) {
    this.set('className','');
    this.addClass( 'linkcolor_'+this.one('option:checked').get('value') );
};

This way the parent SELECT element just gets assigned the same class as the selected child OPTION and css takes care of the rest. Probably a cleaner solution anyway.

http://jsfiddle.net/9sy02756/6/

Answer 1

In your code, when you do this.one('option:checked').getStyle('backgroundColor'), YUI uses the window.getComputedStyle method.

In Firefox, getting the background color on an <option> returns the hover color, which turns out to be a very nice blue. And it will remains that way until you open the select again.

The only way around this is to store the color during <option>'s mouseenter event, and apply it during change. But mouseenter on <option> are only triggered in firefox, not chrome nor IE.

In the end you will need a mix of both approaches to get it right. So the question is answered, the mystery solved, but the alternative approach you proposed in the edit is way simpler.

YUI().use('node', 'selector-css3', function(Y) {
  var lastColor;

  function set_color(e) {
    this.setStyle('backgroundColor', lastColor || this.one('option:checked').getStyle('backgroundColor'));
  };

  Y.on(['available', 'change'], set_color, '#id_linkcolor');

  // For firefox, store computed color before default select blue is applied
  Y.on("mouseover", function(e) {
    lastColor = e.target.getStyle('backgroundColor');
  }, '#id_linkcolor option');
});

http://jsfiddle.net/fxaeberhard/hy3okdph/