web-dev-qa-db-fra.com

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

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 il ne fait pas (comme je m'y attendais).

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.

formscss3
188
Stephen
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 toutes les structures, avec ou sans divs etc.

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>

312
Stephen

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, enroulez le texte avec un <span>:

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

Voir sur JSFiddle .

105
Mike

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 «échantillon», mais j’ai le sentiment que c’est vraiment ce qui fait l’effet et le point essentiel: nous pouvons certainement sélectionner une étiquette pour un contrôle d’entrée contrôlé sans que ce soit un frère ou une sœur. Le secret réside dans conserver les balises input dans un enfant uniquement en fonction de ce dont il a besoin (dans ce cas, seul l'élément body)}.

Puisque l'élément label n'utilise pas réellement le pseudo-sélecteur :checked, le fait que les étiquettes soient stockées dans header n'a pas d'importance. L’avantage supplémentaire est que, puisque header est un élément frère, nous pouvons utiliser le sélecteur générique de frère ~ pour passer de l’élément DOM input[type=radio]:checked au conteneur header, puis utiliser des sélecteurs descendants/enfants pour accéder aux label eux-mêmes, permettant possibilité de les styler lorsque leurs cases à cocher/cases à cocher respectives sont sélectionnées}.

Nous pouvons non seulement styliser les étiquettes, mais également d'autres contenus pouvant être les descendants d'un conteneur frère par rapport à tous les inputs. 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 à un suivi éventuel.

18
Nathan Blair

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

enter image description here 

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

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 .

note: 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 hack.

0
Qwerty