Sélecteur CSS pour un contrôle radio bouton étiquette

Question

Est-il possible d'appliquer un css(3) le style de l'étiquette d'une coché le bouton radio?

J'ai le balisage suivant:

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

Ce que j'espérais, c'est que

label:checked { font-weight: bold; }

ferait quelque chose, mais hélas il n'a pas (comme je m'y attendais).

Est-il un sélecteur qui permet de réaliser ce genre de fonctionnalité? Vous pouvez entourer avec les divs etc si ça peut aider, mais la meilleure solution serait celle qui utilise le label "pour" attribut.

Il convient de noter que je suis en mesure de préciser les navigateurs pour mon application, de sorte que le meilleur de la classe css3 etc s'il vous plaît.

Answer 1

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked 

fonctionne très bien pour le balisage suivant:

<input id="rad1" type="radio" name="rad"><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"><label for="rad2">Radio 2</label>

... et il va travailler pour toute la structure, avec ou sans vrd, etc, tant que le label suit l'entrée radio

Answer 2

Je sais que c'est une vieille question, mais si vous voulez avoir de l' <input> être un enfant de <label> au lieu de devoir les séparer, ici, c'est un pur CSS manière que vous pourriez faire:

:checked + span { font-weight: bold; }

Puis juste le texte à la ligne avec un <span>:

<label>
   <input type="radio" name="test" />
   <span>Radio number one</span>
</label>

Voir sur JSFiddle.

Answer 3

Vous pouvez utiliser un peu de jQuery:

$('input:radio').click(function(){
    $('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});

Vous devez assurez-vous que vos bagages de boutons radio ont la classe correcte au chargement de la page.

Answer 4

Mise à JOUR:

Cela n'a travaillé que pour moi, parce que notre code html généré est loufoque, générant labels avec radios et de leur donner à la fois checked d'attribut.

Jamais l'esprit, et big up pour Brilliand de le signaler!

Si votre étiquette est un frère ou une sœur d'une case à cocher (ce qui est généralement le cas), vous pouvez utiliser l' ~ sélecteur de frères, et un label[for=your_checkbox_id] d'adresse... ou de donner l'étiquette d'un id si vous avez plusieurs étiquettes (comme dans cet exemple où j'ai utiliser des étiquettes pour les boutons)

---

Venu ici à la recherche pour le même - mais il a fini par trouver ma réponse dans les docs.

un label élément avec checked attribut peut être sélectionnée comme suit:

label[checked] {
  ...
}

Je sais que c'est une vieille question, mais peut-être cela aide quelqu'un là-bas :)