CSS: wybrana pseudo Klasa podobna do: sprawdzona, ale dla elementów

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

Mogę następnie nadać kolor tła aktualnie wybranemu elementowi opcji? W ten sposób mogę stylować opcję, która jest obecnie widoczna w zamkniętym rozwijaniu.

Author: Michał Perłakowski, 2011-12-23
Source

3 answers

Pseudoklasa :checked początkowo stosuje się do takich elementów, które mają atrybuty HTML4 selected i checked

Źródło: w3.org

Więc ten CSS działa, chociaż stylizacja {[7] } nie 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 stylizować aktualnie wybraną opcję w zamknięte rozwijane również, możesz spróbować odwrócić logikę: 

select { color: red; }
option:not(:checked) { color: black; } /* or whatever your default style is */
 86
Author: Emmett,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-25 13:44:44

W rzeczywistości możesz stylizować tylko kilka właściwości CSS na : modified option elements. color nie działa, background-color również, ale można ustawić background-image.

Możesz połączyć to z gradientami, aby zrobić sztuczkę.

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.

 12
Author: Antwan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-25 13:46:14

To mi pomogło: 

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}
 -1
Author: Neoweiter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-12 08:58:03