web-dev-qa-db-fra.com

Existe-t-il un moyen de sélectionner une boîte de sélection ouverte dans CSS?

J'ai défini une image d'arrière-plan (flèche vers le bas) dans une zone de sélection après avoir défini l'attribut d'apparence du webkit sur aucun. Lorsque la liste d'options est ouverte, je souhaite afficher une autre image d'arrière-plan (flèche vers le haut). Y a-t-il une pseudo-classe ou quelque chose pour ça? Je n'ai rien trouvé pendant mes recherches ...

htmlcssselectselectorhtml-select
15
user2718671

Il n'est pas possible de détecter si un élément HTML select est ouvert en utilisant CSS, ou même javascript.

Si vous souhaitez personnaliser le symbole de flèche d'un menu déroulant personnalisé, votre meilleure option est d'utiliser un composant de menu déroulant personnalisé qui correspond à un élément select caché.

9
Curt

vous pouvez utiliser le :focus pseudo-classe.

Mais cela indiquera l'état "ouvert", également lorsque le <select> est sélectionné via l'onglet ou un élément vient d'être sélectionné. Pour contourner cela, vous pouvez peut-être utiliser quelque chose comme select:hover:focus mais c'est plutôt moche et ce n'est pas une solution solide.

select:focus {
  background-color: blue;
  color: white;
}
<select>
  <option>Click me</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
19
Nico O