Puis-je styliser un élément Select en fonction de l'option sélectionnée en utilisant uniquement CSS ?

Style Élément basé sur l'

sélectionnée 

Pouvez-vous styliser un élément élément basé sur l' en utilisant uniquement CSS ?

Malgré la croyance populaire, il est bel et bien possible de styliser un

élément basé sur l'élément en utilisant uniquement du CSS.

Le fruit défendu ? Plus maintenant.

Traditionnellement, styliser l' seul l'élément modifierait uniquement l'apparence de l'option dans la liste déroulante, et non l'élément élément lui-même. Cependant, les progrès modernes du CSS ont introduit une nouvelle frontière des possibilités.

Entrez la pseudo-classe :has().

Dans les navigateurs prenant en charge à la fois le :has () pseudo-classe et style de

éléments, vous pouvez exploiter le code suivant :

select:has(option[selected][value="3"]) {
  background: orange;
}

Ce code appliquera le fond orange à l'élément lorsque l'option avec la valeur '3' est sélectionné.

Mais attendez, il y a plus !

CSS vous permet également de faire en sorte que l'option

élément sensible aux changements dans l’option sélectionnée via l’événement onchange. En définissant l'attribut data-chosen de l'attribut à la valeur de l'option sélectionnée, vous pouvez créer un style dynamique basé sur l'interaction de l'utilisateur.

<select onchange="this.dataset.chosen = this.value;">
  ...
</select>

select[data-chosen='opt3'] { 
    border: 2px solid red;
}

Avec cette approche, vous avez un contrôle total sur l'apparence de l'élément

élément basé sur l' et sa valeur, permettant un large éventail de possibilités de personnalisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!