Sélecteur CSS pour l'étiquette d'un bouton radio coché

Question

Est-il possible d'appliquer un style CSS (3) à l'étiquette d'un bouton radio coché?

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 non (comme je le pensais).

Existe-t-il un sélecteur capable d’atteindre ce type de fonctionnalité? Vous pouvez entourer de divs, etc. si cela vous aide, mais la meilleure solution serait d’utiliser l’attribut label '' pour ''.

Il convient de noter que je suis en mesure de spécifier les navigateurs pour mon application, donc 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 cela fonctionnera pour n'importe quelle structure, avec ou sans divs, etc. tant que l'étiquette suivra l'entrée radio.

Exemple:

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

<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>

Answer 2

Je sais que c’est une vieille question, mais si vous souhaitez que le <input> soit un enfant de <label> au lieu de les séparer, voici une méthode purement CSS pour y parvenir:

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

Ensuite, enveloppez simplement le texte avec un <span>:

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

Voir sur JSFiddle .

Answer 3

J'oublie l'endroit où je l'ai vu pour la première fois, mais vous pouvez réellement intégrer vos étiquettes dans un conteneur ailleurs, à condition que l'attribut for= soit défini. Voyons donc un exemple sur SO:

* {
  padding: 0;
  margin: 0;
  background-color: #262626;
  color: white;
}

.radio-button {
  display: none;
}

#filter {
  display: flex;
  justify-content: center;
}

.filter-label {
  display: inline-block;
  border: 4px solid green;
  padding: 10px 20px;
  font-size: 1.4em;
  text-align: center;
  cursor: pointer;
}

main {
  clear: left;
}

.content {
  padding: 3% 10%;
  display: none;
}

h1 {
  font-size: 2em;
}

.date {
  padding: 5px 30px;
  font-style: italic;
}

.filter-label:hover {
  background-color: #505050;
}

#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
  background-color: green;
}

#featured-radio:checked~main .featured {
  display: block;
}

#personal-radio:checked~main .personal {
  display: block;
}

#tech-radio:checked~main .tech {
  display: block;
}

<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">

<header id="filter">
  <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
  <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
  <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>

<main>
  <article class="content featured tech">
    <header>
      <h1>Cool Stuff</h1>
      <h3 class="date">Today</h3>
    </header>

    <p>
      I'm showing cool stuff in this article!
    </p>
  </article>

  <article class="content personal">
    <header>
      <h1>Not As Cool</h1>
      <h3 class="date">Tuesday</h3>
    </header>

    <p>
      This stuff isn't nearly as cool for some reason :(;
    </p>
  </article>

  <article class="content tech">
    <header>
      <h1>Cool Tech Article</h1>
      <h3 class="date">Last Monday</h3>
    </header>

    <p>
      This article has awesome stuff all over it!
    </p>
  </article>

  <article class="content featured personal">
    <header>
      <h1>Cool Personal Article</h1>
      <h3 class="date">Two Fridays Ago</h3>
    </header>

    <p>
      This article talks about how I got a job at a cool startup because I rock!
    </p>
  </article>
</main>

Ouf. C’était beaucoup pour un & Quot; exemple & Quot; mais j'estime que cela fait vraiment comprendre l'effet et le point: nous pouvons certainement sélectionner une étiquette pour un contrôle d'entrée contrôlé sans que ce soit un frère. Le secret réside dans le fait de conserver les input balises body d'un enfant uniquement comme il se doit (dans ce cas, seul l'élément label) .

Etant donné que l'élément :checked n'utilise pas le pseudo-sélecteur header, le fait que les étiquettes soient stockées dans le ~ n'a pas d'importance. Il présente l’avantage supplémentaire que, étant donné que input[type=radio]:checked est un élément frère, nous pouvons utiliser le sélecteur générique de frères et soeurs pour passer de l’élément <=> DOM au conteneur <=>, puis utiliser des sélecteurs descendant / enfant pour y accéder. les <=> sont eux-mêmes , ce qui permet de les personnaliser lorsque leurs cases à cocher / cases à cocher respectives sont sélectionnées .

Nous pouvons non seulement attribuer un style aux étiquettes, mais également à tout autre contenu pouvant être les descendants d'un conteneur frère par rapport à tous les <=> s. Et maintenant, pour le moment que vous attendiez tous, le JSFIDDLE ! Allez-y, jouez avec cela, faites-le fonctionner pour vous, découvrez pourquoi cela fonctionne, cassez-le, faites ce que vous faites!

J'espère que tout cela a du sens et répond pleinement à la question et éventuellement à tout suivi éventuel.

Answer 4

Si votre entrée est un élément enfant de label et que vous avez plusieurs libellés, vous pouvez combiner L'astuce de Mike avec Flexbox + order.

html

<label class="switchLabel">
  <input type="checkbox" class="switch"/>
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

css

label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }

Voir sur JSFiddle .

Remarque: le sélecteur de frères et sœurs ne fonctionne que dans le même parent. Pour contourner ce problème, vous pouvez masquer l'entrée au niveau supérieur à l'aide de @ Nathan Blair bidouille.

Answer 5

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 également vous assurer que vos boutons radio cochés ont la bonne classe lors du chargement de la page.

Answer 6

MISE À JOUR:

Cela n'a fonctionné que pour moi parce que notre code HTML généré existant était délirant, générant label s avec radio s et en leur attribuant les deux checked attributs.

Peu importe, merci à Brilliand de l'avoir soulevé!

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

Je suis venu ici chercher la même chose - mais j'ai fini par trouver ma réponse dans les docs .

un élément <=> avec l'attribut <=> peut être sélectionné comme suit:

label[checked] {
  ...
}

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