Application de styles pour Éléments basés sur les options sélectionnées : une approche CSS uniquement
Traditionnellement, le style du L'élément basé sur l'option sélectionnée s'appuyait sur des solutions JavaScript. Cependant, avec CSS, nous pouvons désormais obtenir cet effet uniquement via CSS.
Le défi : styliser l'élément Option
Tenter de styliser l'élément L'élément n'affecte directement que son apparence dans la liste d'options, pas l'élément sélectionné.
select[name="qa_contact"] option[value="3"] { background : orange; }
La solution : tirer parti de l'événement onchange
Pour faites le élément conscient de l'option sélectionnée, nous pouvons attribuer une valeur à la propriété data-chosen dans l'événement onchange.
Maintenant, nous pouvons cibler et stylisez le élément en fonction de la valeur attribuée à la propriété choisie par les données.
select[data-chosen='opt3'] { border : 2px solid red; }
En utilisant cette approche, nous appliquons avec succès des styles aux éléments élément basé sur l'option sélectionnée en utilisant uniquement CSS.
Futures améliorations CSS : sélecteurs de sujet
Bien qu'il ne soit actuellement pas possible de styliser éléments basés sur les options sélectionnées avec CSS 3, des mises à jour telles que les sélecteurs de sujet dans CSS 4 pourraient potentiellement introduire cette fonctionnalité à l'avenir. Cependant, il reste incertain si cette fonctionnalité deviendra une réalité.
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!