Выбранный вариант потерял красный цвет

Question

Итак, у меня есть элемент select с несколькими элементами option. Все элементы опции, кроме одного, имеют:

color: black;

Один вариант имеет:

color: red;

Например:

<select name="foo">
    <option value="1" class="textBlack">1</option>
    <option value="2" class="textBlack">2</option>
    <option value="3" class="textRed">3</option>
    <option value="4" class="textBlack">4</option>
</select>

Проблема в том, что я хочу, чтобы опция с красным текстом оставалась красной после выбора. Поэтому, когда HTML в DOM выглядит следующим образом (т.е. я нажимаю на элемент select и выбираю красную опцию):

<select name="foo">
    <option value="1" class="textBlack">1</option>
    <option value="2" class="textBlack">2</option>
    <option value="3" class="textRed" selected="selected">3</option>
    <option value="4" class="textBlack">4</option>
</select>

Я бы хотел, чтобы текст в элементе выбора также был красным. Однако текст черный.

Answer 1

с чистым CSS я не думаю, что это возможно. Вы можете использовать select {color:red}, но это будет красный цвет всех option. Для достижения того, что вам нужно, вероятно, потребуется javascript, пример кода jQuery приведен ниже:

$("select").change(function(){
    var current = $("select option:selected").attr("value");
    if (current == 3) {$("select").css('color','red');} else {$("select").css('color','black');}
});
$("select").click(function() {
    $("select option").css('color','black');
});

Демо: http://jsfiddle.net/xrPKN/2/

Answer 2

Затем вам придется изменить цвет выбора через JavaScript. Что-то вроде

$("select").change(function(){
    $(this).css("color", $(this).children("option:selected").css("color")); 
});

Answer 3

.textRed{color:red}

Очень просто, разве я что-то упустил?