Comment puis-je styliser les étiquettes des boutons radio cochés en utilisant uniquement CSS ?

Styling des étiquettes des boutons radio cochés

En CSS, il est possible d'appliquer des styles aux étiquettes associées aux boutons radio cochés, même sans utiliser de des éléments comme les divs.

Le frère adjacent Combinateur

Pour cibler immédiatement une étiquette qui suit une entrée de bouton radio cochée, utilisez le combinateur frère adjacent CSS ( ). Ce combinateur correspond aux étiquettes adjacentes et qui suivent un élément spécifique.

Syntaxe :

input[type="radio"]:checked + label {
  /* Styles */
}

Exemple :

Considérez le balisage HTML suivant :

<input>

Utilisation du frère adjacent combinateur, vous pouvez styliser l'étiquette du bouton radio coché comme suit :

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

Résultat :

Après avoir sélectionné un bouton radio, l'étiquette correspondante deviendra en gras , indiquant son état vérifié. Cette technique peut être utilisée avec diverses propriétés CSS pour personnaliser l'apparence des boutons radio cochés.

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!