CSS peut-il styliser un élément Select en fonction de l'option choisie ?

Styler les élus : CSS peut-il styliser une sélection en fonction de l'option sélectionnée ?

Est-il possible de personnaliser l'apparence d'un élément de sélection en fonction de l'option actuellement sélectionnée ? Malgré la disponibilité des solutions JavaScript, cette question se pose souvent.

Défier l'impossible

Styliser l' L'élément lui-même, comme vous l'avez tenté, modifie son apparence lorsqu'il est présent dans la liste des options, mais pas lorsqu'il est sélectionné. CSS seul ne peut pas cibler directement l'élément sélectionné en raison des limitations techniques actuelles.

Le sélecteur de sujet à la rescousse ?

Le sélecteur de sujet proposé par CSS 4 pourrait offrir du potentiel à l'avenir. Cependant, pour l'instant, cette fonctionnalité reste indisponible.

La pseudo-classe :has

Bien que la pseudo-classe :has puisse partiellement aider, elle est limitée au style. la sélection basée sur les attributs HTML et uniquement lorsque l'option est explicitement sélectionnée initialement. Ses limites deviennent apparentes lorsque l'utilisateur modifie la sélection, ce qui modifie les propriétés du DOM sans affecter les attributs HTML sur lesquels CSS s'appuie.

Une solution CSS uniquement

Malgré le limitations du CSS, une solution intelligente existe. En introduisant un attribut data-chosen avec une attribution de valeur dans l'événement onchange, nous pouvons faire prendre conscience à l'élément select de l'option actuelle. Cela crée une opportunité pour CSS de cibler et de styliser en fonction de l'option sélectionnée.

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

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

Cette solution élégante permet à CSS de personnaliser l'apparence de l'élément sélectionné en fonction de l'option sélectionnée sans avoir besoin de JavaScript.

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!