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

Чи є спосіб стилізувати вибраний на даний момент <option>елемент в <select>елементі?

Тоді я міг би надати колір тла поточно вибраному елементу опції? Таким чином я можу стилізувати варіант, який зараз можна переглянути у закритому випадаючому списку.

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

Насправді ви можете стилізувати лише кілька властивостей CSS на : модифіковані елементи параметрів. colorтеж не працює, background-colorале ви можете встановити a 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.

Це працювало для мене:

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