web-dev-qa-db-fra.com

CSS - Comment styliser une étiquette de boutons radio sélectionnés?

Je souhaite ajouter un style à l'étiquette sélectionnée d'un bouton radio:

HTML:

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked>All</label>
 <label><input type="radio" value="false">Open</label>
 <label><input type="radio" value="true">Archived</label>
</div>

CSS

.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
    background:Red;
    border:1px solid green;
    padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}

Des idées que je fais mal?

htmlcsscss3
123
AnApprentice
.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;
}
<div class="radio-toolbar">
  <input type="radio" id="radio1" name="radios" value="all" checked>
  <label for="radio1">All</label>

  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">Open</label>

  <input type="radio" id="radio3" name="radios" value="true">
  <label for="radio3">Archived</label>
</div>

Tout d’abord, vous voudrez probablement ajouter l’attribut name sur les boutons radio. Sinon, ils ne font pas partie du même groupe et plusieurs boutons radio peuvent être cochés.

De plus, comme j'ai placé les étiquettes comme frères et soeurs (parmi les boutons radio), je devais utiliser les attributs id et for pour les associer.

262
Šime Vidas

Si vous voulez vraiment mettre les cases à cocher à l'intérieur de l'étiquette, essayez d'ajouter une balise span supplémentaire, par exemple.

HTML

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked><span>All</span></label>
 <label><input type="radio" value="false"><span>Open</span></label>
 <label><input type="radio" value="true"><span>Archived</span></label>
</div>

CSS

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

Cela définira les arrière-plans de tous les frères et sœurs du bouton radio sélectionné.

25
iainbeeston

Vous utilisez un sélecteur frère apparenté (+) lorsque les éléments ne sont pas frères. L'étiquette est le parent de l'entrée, pas son frère.

CSS n'a aucun moyen de sélectionner un élément en fonction de ses descendants (ni de ce qui le suit).

Vous aurez besoin de regarder JavaScript pour résoudre ce problème.

Sinon, réorganisez votre marge bénéficiaire:

<input id="foo"><label for="foo">…</label>
6
Quentin

Vous pouvez ajouter une plage à vos fichiers HTML et CSS.

Voici un exemple de mon code ...

HTML (JSX):

<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/>  
<label for="radiostyle1"><span></span> am  </label>

<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/>
<label for="radiostyle2"><span></span> pm  </label>

CSS pour que le bouton radio standard disparaisse à l'écran et superpose l'image du bouton personnalisé:

input[type="radio"] {  
    opacity:0;                                      
}

input[type="radio"] + label {
    font-size:1em;
    text-transform: uppercase;
    color: white ;  
    cursor: pointer;
    margin:auto 15px auto auto;                    
}

input[type="radio"] + label span {
    display:inline-block;
    width:30px;
    height:10px;
    margin:1px 0px 0 -30px;                       
    cursor:pointer;
    border-radius: 20%;
}


input[type="radio"] + label span {
    background-color: #FFFFFF 
}


input[type="radio"]:checked + label span{
     background-color: #660006;  
}
1
Praveena Janakiraman

Comme il n’existe actuellement aucune solution CSS pour attribuer un style à un parent, j’utilise un simple jQuery ici pour ajouter une classe à une étiquette avec une entrée cochée.

$(document).on("change","input", function(){
 $("label").removeClass("checkedlabel");
 if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});

N'oubliez pas de donner à l'étiquette de l'entrée pré-cochée la classe checkedlabel aussi

0
Fanky