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

Question

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

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

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>

---

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

select { color: red; }
option:not(:checked) { color: black; } /* or whatever your default style is */

Answer 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>

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

Answer 3

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

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