CSS: псевдокласс selected аналогично: checked, но для элементов <select>

86

Есть ли способ стилизовать текущий выбранный <option>элемент в <select>элементе?

Затем я мог бы задать цвет фона для текущего выбранного элемента опции? Таким образом я могу стилизовать вариант, который в настоящее время отображается в закрытом раскрывающемся списке.

html css css-selectors pseudo-class Веб-дизайнер
источник

Ответы:

123

:checkedпсевдо-класс изначально относится к таким элементам , которые имеют HTML4 selectedи checkedатрибуты

Источник: w3.org

Итак, этот CSS работает, хотя стилизация colorвозможна не во всех браузерах:

option:checked { color: red; }

Пример этого в действии, скрытие текущего выбранного элемента из раскрывающегося списка.

option:checked { display:none; }
<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
Развернуть фрагмент

Чтобы стилизовать текущий выбранный вариант в закрытом раскрывающемся списке, вы можете попробовать изменить логику:

select { color: red; }
option:not(:checked) { color: black; } /* or whatever your default style is */
Эммет
источник
5
Вы это тестировали? На FF8 это не работает . обновление: это не работает и в Chromium 15.
Brigand
1
@emmett Я тоже проверил его в Chrome 16. Как я сказал в предыдущем комментарии, он стилизует выбранный вариант в раскрывающемся списке, но не в закрытой области просмотра.
Web_Designer
2
@Web_Designer Хорошо, я вижу проблему. Я отредактировал свой ответ другим (шатким) решением.
Emmett
принятый ответ не работает для меня в хроме. вы можете протестировать здесь: jsfiddle.net/hk4s0ech
Андре Шенье
17

На самом деле вы можете стилизовать только несколько CSS-свойств для элементов : modified option. colorтоже не работает, background-colorно вы можете установить background-image.

Вы можете соединить это с градиентами, чтобы добиться цели.

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}
<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
Развернуть фрагмент

Работает на gecko / webkit.

Antwan
источник
Принятый ответ не сработал для меня, но это решение сработало. Спасибо!
Энтони Хильярд, 06
Обратите внимание, что вы также можете применить к нему фильтр следующим образом: Option: checked {filter: grayscale (1);}. Это похоже на то, как в настоящее время вы можете стилизовать флажки и радиокнопки в Chrome, чтобы сделать их не синими.
KS74,
3

Это сработало для меня:

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}
Neoweiter
источник