CSS: wybrana pseudoklasa podobna do: zaznaczona, ale dla elementów <select>

Czy istnieje sposób na stylizację aktualnie wybranego <option>elementu w <select>elemencie?

Mógłbym wtedy nadać kolor tła aktualnie wybranemu elementowi opcji? W ten sposób mogę nadać styl opcji, która jest obecnie widoczna w zamkniętym menu.

:checkedPseudo-klasa początkowo odnosi się do takich elementów, które mają HTML4 selectedi checkedatrybuty

Źródło: w3.org

Tak więc ten CSS działa, chociaż stylizacja colornie jest możliwa w każdej przeglądarce:

option:checked { color: red; }

Przykład tego w akcji, ukrywanie aktualnie wybranego elementu z rozwijanej listy.

option:checked { display:none; }

<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

Aby nadać styl aktualnie wybranej opcji również w zamkniętym menu, możesz spróbować odwrócić logikę:

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

Właściwie możesz stylizować tylko kilka właściwości CSS na : zmodyfikowane elementy opcji. colornie działa, background-colorale możesz ustawić plik background-image.

Możesz to połączyć z gradientami, aby załatwić sprawę.

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Działa na gecko / webkit.

To zadziałało dla mnie:

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