CODEWITHSUNDEEP
jqueryhtmlcssfirefoxselect
Anonymous
Anonymous

Reputation: 4630

firefox css bug/issue

While working fine Chrome and IE7-9, firefox brings yet another surprise...

http://jsfiddle.net/D3zXj/

What I'm trying to do is to change the color of Select according to the color of the selected option. For some mysterious reason it doesn't work in firefox.

Any ideas why?

$('#selectstat_sch').change(function(){
    $(this).css('color',$('option:selected',this).css('color'));
}).trigger('change');

Upvotes: 1

Views: 140

Answers (3)

Boris Zbarsky
Boris Zbarsky

Reputation: 35084

When the option is selected, it gets a different computed color than the one in your HTML, because there's a UA sheet rule that styles selected options. You can see this, in fact: the selected option is white with a blue background.

So instead of getting the computed color from the option, you may want to just get .style.color, since that's what you want,

Upvotes: 0

Anonymous
Anonymous

Reputation: 4630

Elaborating on the undefined, we may want to validate first our css property,

This should also work if some other properties are present.

http://jsfiddle.net/D3zXj/2/

    var style=$('option:selected',this).attr('style');
    var matches=style.match(/color:([^;]+)/);
    if (matches) $(this).css('color',matches[1]);
    //else alert('no match');

Upvotes: 1

gotqn
gotqn

Reputation: 43676

Use the attr('style') instead css('color'):

$(document).ready(function(){
    $('#selectstat_sch').change(function(){
        $(this).attr('style',$('option:selected').attr('style'));
    });
});

but this copy and overwrites the whole styles.

Upvotes: 0

Related Questions