C'è un modo per selezionare una casella di selezione aperta in css?

Question

Ho impostato un'immagine di sfondo (freccia giù) in una casella di selezione dopo aver impostato l'attributo di aspetto del webkit su none. Quando si apre la lista delle opzioni, voglio visualizzare un'altra immagine di sfondo (freccia in alto). C'è una pseudo classe o qualcosa del genere? Non ho trovato nulla durante la mia ricerca ...

Answer 1

Non è possibile rilevare se un elemento HTML select viene aperto tramite CSS o anche javascript.

Se si desidera personalizzare il simbolo freccia di un menu a discesa personalizzato, l'opzione migliore è utilizzare un componente a discesa personalizzato che esegue il mapping su un elemento nascosto select.

Answer 2

è possibile utilizzare la pseudo classe :focus.

Ma questo indicherà lo stato "aperto", anche quando è selezionato il <select> tramite scheda o un elemento è stato appena selezionato. Per ovviare a questo, potresti usare qualcosa come select:hover:focus ma questo è piuttosto brutto e non è una soluzione solida.

select:focus 
 
{ 
 
    background-color: blue; 
 
    color: white; 
 
}

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