CSS: wybrana pseudo klasa podobna do: sprawdzona, ale dla <select> elementów

Question

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

Czy mogę wtedy podać kolor tła do aktualnie wybranego elementu opcji? W ten sposób mogę ustawić opcję, która jest obecnie widoczna w zamkniętym menu rozwijanym.

Answer 1

pseudo-klasa :checked początkowo odnosi się do takich elementów, które mają HTML4 selected i checked atrybutów

Źródło: w3.org

---

tak, to CSS prace, chociaż stylizacji color nie jest możliwe w każdej przeglądarce:

option:checked { color: red; } 

Przykład tego działania, ukrywanie aktualnie wybranego elementu z rozwijanej listy.

option:checked { display:none; }

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

---

Aby styl aktualnie wybraną opcję w zamknięty rozwijaną jak dobrze, można spróbować odwrócić logikę:

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

Answer 2

Właściwie można tylko styl kilka właściwości CSS na : zmodyfikowany opt elementy jonowe. color nie działa, background-color, ale można ustawić background-image.

Możesz połączyć to 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>

Prace nad Gecko/WebKit.

Answer 3

Ten pracował dla mnie:

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