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

86

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.

Projektant stron internetowych
źródło

Odpowiedzi:

123

: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 */
Emmett
źródło
5
Czy to przetestowałeś? Wydaje się, że nie działa dla mnie na FF8. aktualizacja: nie działa też w Chromium 15.
Brigand
1
@emmett Ja też sprawdziłem to w Chrome 16. Jak powiedziałem w moim poprzednim komentarzu, stylizuje on wybraną opcję z listy rozwijanej, ale nie tę w zamkniętym obszarze widocznym.
Web_Designer,
2
@Web_Designer Ok, widzę problem. Zmieniłem odpowiedź za pomocą innego (wątpliwego) rozwiązania.
Emmett
zaakceptowana odpowiedź nie działa dla mnie w chrome. możesz przetestować tutaj: jsfiddle.net/hk4s0ech
Andre Chenier
17

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.

Antwan
źródło
Przyjęta odpowiedź nie zadziałała dla mnie, ale to rozwiązanie zadziałało. Dziękuję Ci!
Anthony Hilyard
Zauważ, że możesz również zastosować do niego filtr w ten sposób: Opcja: zaznaczone {filtr: skala szarości (1);} Jest to podobne do tego, jak obecnie możesz stylizować pola wyboru i przyciski radiowe w Chrome, aby nie były niebieskie.
KS74
3

To zadziałało dla mnie:

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}
Neoweiter
źródło