Comment styliser correctement les étiquettes des boutons radio sélectionnés en CSS ?

Style des étiquettes des boutons radio sélectionnés en CSS

Dans cet exemple, nous visons à styliser les étiquettes des boutons radio sélectionnés. Cependant, le CSS fourni ne semble pas fonctionner comme prévu. Analysons le code HTML et CSS pour identifier le problème.

Le code HTML contient un div avec la classe "radio-toolbar" qui contient les boutons radio et leurs étiquettes. Chaque bouton radio est masqué à l'aide de display: none;. Des styles sont appliqués aux étiquettes, notamment une couleur d'arrière-plan, une bordure et un remplissage.

En passant au CSS, la première règle masque les entrées des boutons radio, ce qui est correct. La deuxième règle stylise les étiquettes elles-mêmes. Le problème réside dans la troisième règle, qui vise à styliser l'étiquette du bouton radio sélectionné.

Dans la troisième règle, nous essayons de sélectionner l'élément d'étiquette immédiatement adjacent à un bouton radio coché en utilisant ce qui suit sélecteur : .radio-toolbar label input[type="radio"] : coché. Cependant, le sélecteur correspond uniquement à l’élément immédiatement précédent. Dans ce cas, il s'attend à ce que l'entrée du bouton radio vienne avant l'étiquette, mais dans le code HTML, l'étiquette vient avant l'entrée.

CSS corrigé

Pour résoudre le problème, nous pouvons utilisez plutôt le CSS suivant :

.radio-toolbar input[type="radio"]:checked + label { /* New selector */
    background-color: pink !important;
}

En changeant le sélecteur en .radio-toolbar input[type="radio"]:checked label, nous nous assurons que la couleur d'arrière-plan est appliqué à l'étiquette qui suit l'entrée du bouton radio cochée.

Modifications supplémentaires pour la fonctionnalité

Outre le problème du sélecteur, nous pouvons apporter quelques autres modifications pour une meilleure fonctionnalité :

1. Il est recommandé d'utiliser un bloc en ligne pour les étiquettes afin de les aligner correctement.
2. Définition d'un attribut for sur les étiquettes et correspondant Les attributs id sur les boutons radio les associeront correctement.

Voici le HTML et le CSS mis à jour :

HTML :

<div class="radio-toolbar">
  <input type="radio">

CSS :

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked + label {
  background-color: #bbb;
}

Avec ces modifications, les étiquettes des boutons radio seront désormais être correctement stylé et fonctionnel, en indiquant l'option sélectionnée avec la couleur de fond rose.

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!