Как первый выбранный элемент в select выделить другим цветом?

Question

[andreyqin]

Есть стандартный select. Как сделать, чтобы когда выбран первый элемент, цвет его текста был один, когда все остальные - другой. Решить задачу желательно без JavaScript, только с помощью CSS. Буду благодарен за идеи.

Answer 1

[Александр]

Только если менять цвет select, но вряд ли вас это устроит.

select {
   color: #f00;
}
option {
    color: #000;
}
option:first-child {
   color: #f00;
}

По-другому на css не сделать.

Comments

[andreyqin]

Что-то ничего не происходит - jsfiddle.net/vfy755tf/3

[Александр]

Первый option красного цвета, остальные - черные. select - красный.

[Александр]

andreyqin: у вас случаем не mac?

[andreyqin]

Александр: мак. А в чем может быть проблема? Даже пример выше на js не работает

[Александр]

andreyqin: Трабл в сафари и хроме на маке. Надо задать -webkit-appearance: none; для select.

[andreyqin]

Александр: спасибо. Видимо без джаваскрипта тут действительно не обойтись

Answer 2

[Петр]

c JavaScript codepen.io/anon/pen/QwBYGy

Comments

[Петр]

andreyqin Вот посмотри codepen.io/anon/pen/bNjzvE на маке

[andreyqin]

Спасибо, пожалуй возьму ваш пример за основу

Answer 3

[Иван Маноил]

select::first-child:active{} Вы это имеете в виду?

Comments

[andreyqin]

А можно пример?