CSS peut-il styliser un élément en fonction du `` sélectionné?

Styliser un Élément basé sur l' sélectionnée 

Style d'un élément

élément basé sur l' a longtemps semblé impossible avec du CSS pur. Bien que vous puissiez styliser l'option directement, les modifications s'appliquent uniquement à l'option dans la liste, pas à celle sélectionnée.

Les solutions JavaScript ont proposé des solutions de contournement, mais CSS peut-il vraiment satisfaire à cette exigence ?

Le "Hold My Beer" Solution

Étape 1 : Mettre à jour le fichier Valeur de l'élément

Utilisez l'événement onchange pour attribuer la valeur sélectionnée à un attribut de données personnalisé sur l'élément

élément. Par exemple :

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

Étape 2 : Cibler et style

Avec la valeur sélectionnée stockée dans l'attribut de données, vous pouvez maintenant cibler l'attribut élément utilisant des sélecteurs CSS :

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

Pour un exemple en direct, consultez ce CodePen : https://codepen.io/Aprillion/pen/xxx

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!

JavaScript css for select using Attribute Event this https

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：Comment créer une scène de Noël magique avec des flocons de neige animés et le Père Noël en JavaScriptArticle suivant：Comment créer une scène de Noël magique avec des flocons de neige animés et le Père Noël en JavaScript

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