Pourquoi mon CSS ne stylise-t-il pas l'étiquette du bouton radio sélectionné ?

Style des étiquettes des boutons radio sélectionnés : dépannage

Vous essayez de styliser l'étiquette d'un bouton radio sélectionné, mais le style souhaité n'est pas 'n'est pas appliqué. Examinons pourquoi et corrigeons-le.

Votre code HTML est correct et le CSS que vous avez fourni inclut des règles de style pour l'entrée radio et son étiquette. Le problème réside dans le sélecteur du bouton radio coché :

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

Ce sélecteur cible l'élément d'entrée, qui est masqué à l'aide de display:none. Lorsque vous cochez un bouton radio, l'attribut coché est ajouté à son entrée, pas à son étiquette. Pour styliser l'étiquette, vous devez sélectionner l'élément d'étiquette lui-même :

.radio-toolbar label[for]:checked {
    background: pink !important;
}

Ici, nous utilisons un sélecteur d'attribut [for] pour sélectionner l'étiquette associée à un bouton radio coché. Le CSS mis à jour devrait fonctionner comme prévu.

N'oubliez pas d'inclure également la propriété d'affichage de l'étiquette pour la rendre visible :

.radio-toolbar label {
    ...
    display: inline-block;
    ...
}

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!