Change color of option selected - jQuery

Question

I want to change the text color of the option that is selected="selected":

    <select class="select">
        <option value="--">--</option>
        <option value="2014">2014</option>
        <option value="2013">2013</option>
        <option value="2012" selected="selected">2012</option>
        <option value="2011">2011</option>
    </select>

I have been trying with CSS but it seems its not possible:

    .select select [selected="selected"]{
        color: #2b2b2b;
    }

Any ideas with jQuery?

Solution 1

I have been trying with CSS but it seems its not possible:

Because you are targetting the select tag and not option tag also, that selector means select any select element nested inside element having .select class

select option[selected] {
    color: red;
}

Demo

You are using class so you can make a selector like

.select option[selected] {
   color: red;
}

Solution 2

Try

$('.select').change(function () {
            $(this).find('option:selected').css('background-color', 'red');
});

for changing color of text Use

  $(this).find('option:selected').css('color', 'red'); 

FIDDLE

Solution 3

LIke this

demo

js

    $('.select').change(function () {
    $(this).find('option').css('color', '#000000');
    $(this).find('option:selected').css('color', '#ff0000');
}).trigger('change');

Solution 4

You can do:

 $('.select option:selected').css('color','#2b2b2b');

or if you want to fire the event every time select option has been changed, you can do:

$('.select').change(function () {
     $(this).find('option:selected').css('color','#2b2b2b');
});

or with just plain css:

select option:checked {
     color: #2b2b2b;
}

View more solutions

Comments

[andyb]

It might be my browser but when I change the selected option in the demo, the color does not move to the newly selected option

[Mr. Alien]

@andyb If it's that the case than you will have to use jQuery, CSS will change the color of the initial state

[andyb]

Yeah I guess the requirements aren't clear between if it should be a one-off selected="selected" CSS or does it need to be dynamic.

[Mr. Alien]

@andyb Yea, I answered this because OP was trying to style that with CSS, so always first preference to CSS, than comes the jQuery

[codek]

I´m using the latest version of Chrome and I don´t see a change in the color of the demo... what could be the problem?

[Abel Callejo]

I tried this on a Chrome on top of a Mac. Didn't work.