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.

— Antwan
источник

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

— Энтони Хильярд, 06

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

— KS74,

3

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

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}

— Neoweiter
источник