Existe-t-il un moyen de styliser l’élément actuellement sélectionné dans un élément
?
Je pourrais alors donner une couleur de fond à l’élément d’option actuellement sélectionné? De cette manière, je peux personnaliser l’option actuellement visible dans la liste déroulante fermée.
la pseudo-classe
:checked
s’applique initialement aux éléments dont les atsortingbuts HTML4 sontselected
etchecked
Source: w3.org
Donc, ce CSS fonctionne, bien que le style de la 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é dans la liste déroulante.
option:checked { display:none; }
En fait, vous ne pouvez définir que quelques propriétés CSS sur : les éléments d’options modifiés . color
ne fonctionne pas, background-color
non plus, mais vous pouvez définir une background-image
.
Vous pouvez coupler cela avec des dégradés pour faire le tour.
option:hover, option:focus, option:active, option:checked { background: linear-gradient(#5A2569, #5A2569); }
Cela a fonctionné pour moi:
select option { color: black; } select:not(:checked) { color: gray; }