更改所选选项的颜色 - 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?

Answer 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;
}

Answer 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

Answer 3

LIke this

demo

js

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

Answer 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;
}

Answer 5

.select option:checked {
    color: red;
}

Not sure about browser compatibility on this one..

Edit: https://developer.mozilla.org/en-US/docs/Web/CSS/:checked