Maison >interface Web >tutoriel CSS >Comment styliser l'étiquette d'un bouton radio coché avec CSS ?

Comment styliser l'étiquette d'un bouton radio coché avec CSS ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-29 00:20:13799parcourir

How to Style a Checked Radio Button's Label with CSS?

Sélecteur CSS pour étiqueter les boutons radio cochés

La question se pose : est-il possible de styliser une étiquette associée à un bouton radio coché en utilisant CSS ? Malgré les attentes, le sélecteur "label:checked" ne parvient pas à produire le résultat souhaité.

Une solution viable consiste à utiliser le combinateur frère adjacent " ". Ce combinateur relie deux séquences de sélecteurs partageant un parent commun, le deuxième sélecteur suivant immédiatement le premier.

Par exemple, le sélecteur "input[type="radio"]:checked label" cible les étiquettes qui ciblent directement suivre les entrées radio cochées, quelle que soit leur place dans le HTML structure.

Exemple :

input[type="radio"]:checked+label { font-weight: bold; }

HTML :

<input>

Cette approche met effectivement en gras l'étiquette du bouton radio coché tout en laissant les étiquettes des boutons non cochés inchangées.

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!

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