CSS - comment styliser une étiquette de boutons de Radio?
je veux 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>
.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;
}
une idée de ce que je fais de mal?
4 réponses
.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 voulez 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 vérifiées.
aussi, puisque j'ai placé les étiquettes en tant que frères et sœurs (des boutons radio), j'ai dû utiliser les attributs id et for pour les associer ensemble.
Si vous voulez vraiment mettre les cases à l'intérieur de l'étiquette, essayez d'ajouter un supplément de balise span, 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;
}
qui définira les fonds pour tous les frères et sœurs du bouton radio sélectionné.
vous utilisez un sélecteur de frères et sœurs adjacent ( + ) lorsque les éléments ne sont pas des frères et sœurs. L'étiquette est le parent de l'Entrée, pas son frère.
CSS n'a aucun moyen de sélectionner un élément basé sur ses descendants (ni rien qui le suive).
vous aurez besoin de regarder JavaScript pour résoudre cela.
alternativement, réarrangez votre markup:
<input id="foo"><label for="foo">…</label>
vous pouvez ajouter une portée à votre 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 faire de standard radio bouton disparaissent de l'écran et de les superposer personnalisée à l'image du bouton:
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;
}