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.
3 answers
Pseudoklasa
:checked
początkowo stosuje się do takich elementów, które mają atrybuty HTML4selected
ichecked
Ź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 */
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.
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;
}
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