CSS - Come modellare un'etichetta dei pulsanti di opzione selezionata?

Voglio aggiungere uno stile all'etichetta selezionata di un pulsante di opzione:

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

Qualche idea su cosa sto facendo di sbagliato?

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

Prima di tutto, probabilmente desideri aggiungere l' nameattributo ai pulsanti di opzione. Altrimenti, non fanno parte dello stesso gruppo e possono essere controllati più pulsanti di opzione.

Inoltre, poiché ho posizionato le etichette come fratelli (dei pulsanti di opzione), ho dovuto usare gli attributi ide forper associarli insieme.

Se vuoi davvero mettere le caselle di controllo all'interno dell'etichetta, prova ad aggiungere un tag span aggiuntivo, ad es.

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

Ciò imposterà gli sfondi per tutti i fratelli del pulsante di opzione selezionato.

Si sta utilizzando un selettore di fratello adiacente ( +) quando gli elementi non sono fratelli. L'etichetta è il genitore dell'input, non è fratello.

CSS non ha modo di selezionare un elemento in base ai suoi discendenti (né a tutto ciò che lo segue).

Dovrai cercare in JavaScript per risolvere questo problema.

In alternativa, riorganizza il markup:

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

Puoi aggiungere uno span al tuo html e css.

Ecco un esempio dal mio codice ...

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 per far sparire il pulsante di opzione standard sullo schermo e sovrapporre l'immagine del pulsante personalizzato:

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

Poiché al momento non esiste una soluzione CSS per lo stile di un genitore, ne uso uno semplice jQuery per aggiungere una classe a un'etichetta con input verificato al suo interno.

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

Non dimenticate di dare l'etichetta del pre-ingresso controllato la classe checkedlabeltroppo

Ecco una soluzione accessibile

label {
  position: relative;
}

label input {
  position: absolute;
  opacity: 0;
}

label:focus-within {
  outline: 1px solid orange;
}

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