CSS: выбранный псевдокласс, подобный: проверено, но для элементов <select>

Question

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

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

Answer 1

: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 */

Answer 2

На самом деле вы можете только стилизовать несколько CSS-свойств для : измененных элементов 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>

Работает на геккон /webkit.

Answer 3

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

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

Answer 4

CSS из принятого ответа также не работает для меня. Но этот встроенный стиль работает. Протестировано в Firefox 86 и Chrome 88.