web-dev-qa-db-fra.com

CSS: pseudo classe sélectionnée similaire à: vérifié, mais pour les éléments <select>

Existe-t-il un moyen de styler l'élément <option> Actuellement sélectionné dans un élément <select>?

Je pourrais alors donner une couleur de fond à l'élément d'option actuellement sélectionné? De cette façon, je peux styler l'option qui est actuellement visible dans le menu déroulant fermé.

htmlcsscss3css-selectorspseudo-class
72
Web_Designer

le :checked La pseudo-classe s’applique initialement à de tels éléments ayant les attributs HTML4 selected et checked

Source: w3.org

Donc, ce CSS fonctionne, bien que styliser le color ne soit pas possible dans tous les navigateurs:

option:checked { color: red; }

Un exemple de cela en action, masquant l'élément actuellement sélectionné de la liste déroulante.

option:checked { display:none; }
<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

Pour styler l'option actuellement sélectionnée dans le menu déroulant fermé , vous pouvez également essayer d'inverser la logique:

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

En fait, vous ne pouvez styler que quelques propriétés CSS sur les éléments d’option : modified. color ne fonctionne pas, background-color non plus, mais vous pouvez définir un background-image.

Vous pouvez coupler cela avec des gradients pour faire l'affaire.

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}
<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Fonctionne sur gecko/webkit.

15
Antwan

Cela a fonctionné pour moi:

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