Change color of selected option - jQuery

Question

I want to change the text color of the selected option = "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'm trying to use CSS, but it seems like this is not possible:

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

Any ideas with jQuery?

Answer 1

I'm trying to use CSS, but it seems like this is not possible:

Since you are also targeting a tag select, not a tag option, this selector means that any element selectnested inside the element has.select class

select option[selected] {
    color: red;
}

Demo

You use classso you can make a type selector

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

Answer 2

Try

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

to change the color of the text Use

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

Fiddle

Answer 3

LIke this

JS

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

Answer 4

:

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

, select , :

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

css:

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

Answer 5

.select option:checked {
    color: red;
}

Not sure about browser compatibility with this.

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