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

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

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

Ответы

Ответ 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>

Ответ 2

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

Ответ 3

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

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