CSS seul peut-il styliser un élément en fonction de sa sélection ?

Style Éléments basés sur élément basé sur l' l'utilisation de CSS s'est avérée être un défi. Contrairement aux éléments d'option, qui peuvent être stylisés directement, le style de l'élément sélectionné reste insaisissable.

Réponse :

Le CSS seul n'est pas suffisant pour styliser un élément élément en fonction de l' sélectionnée. Cependant, une solution de contournement intelligente impliquant l'événement onchange et une attribution d'attribut de données peut vous accorder cette capacité convoitée.

Solution :

Attribuer une valeur à l'attribut choisi par les données :

Sur l'onglet

élément, ajoutez un événement onchange qui attribue la valeur actuelle à l'attribut choisi par les données. Cela rend la valeur de l'option sélectionnée disponible pour CSS.

Ciblez l'élément Select :

Créez des règles CSS qui ciblent l'élément élément basé sur l’attribut data-chosen. Dans cet exemple, la valeur opt3 est ciblée pour styliser l'option sélectionnée.

Remarque :

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

Bien que cette solution offre un moyen efficace de styliser sélectionnée, il se peut qu'elle ne soit pas largement prise en charge par les navigateurs.

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

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!

css while select using Attribute Event this

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Est-ce que CSS « ​​animation-delay » affecte toutes les itérations d'une animation répétée ?Article suivant：Est-ce que CSS « ​​animation-delay » affecte toutes les itérations d'une animation répétée ?

Articles Liés

Voir plus

• Résumé de ce à quoi vous devez faire attention à propos de Border lors de l'écriture de CSS
• Comment réaliser une sélection multi-styles et un changement de styles en temps réel_Échange d'expérience
• Analyse détaillée de l'utilisation du chapiteau
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved