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


86

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

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

Ответы:


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.


Принятый ответ не сработал для меня, но это решение сработало. Спасибо!
Энтони Хильярд, 06

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

3

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

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.