класс css опции удаляется при выборе опции

Question

<select class="FunctieSelect">
<option class="yellow" value="-1">- kies -</option>
<option class="yellow" value="1">KSZ functie</option>
<option class="yellow" value="2">Bakker</option>
<option class="yellow" value="3">Schilder</option>
<option class="yellow" value="4">Andere</option>
</select>

с

.yellow
{
    background-color: Yellow;
}

выдает следующий вывод:

альтернативный текст http://thomasstock.net/selectCss.JPG

На самом деле, только один из вариантов будет иметь желтый фон, поэтому настройка css на select мне не поможет

=> Как сделать, чтобы опция оставалась желтой, когда она выбрана?

Я знаю, что возможное решение - использовать jquery для создания события «change», проверить в событии change, какая опция выбрана, и затем установить css для select. Но мне интересно, есть ли более простое решение?

Answer 1

К сожалению, вы видите поведение виджета браузера по умолчанию, которое не имеет переопределения CSS. Есть несколько доступных вам опций - возможно, что-то вроде Укрощение выбора будет полезно?

Answer 2

Договорились с Андреем. Еще одна вещь, о которой вы можете подумать, это то, что удобство использования снижается, когда вы меняете стили элементов формы. Если вы хотите обозначить измененную часть формы, вы можете просто выделить поле вокруг выделения.

Answer 3

Если вы хотите стилизовать поле выбора, я бы предложил заменить их чем-то вроде JQuery Flexbox ( demo ). В противном случае они будут отображаться по-разному в разных браузерах и платформах.