CSS - jak stylizować etykietę wybranych przycisków radiowych?

Chcę dodać styl do wybranej etykiety przycisku radiowego:

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

Jakieś pomysły, co robię źle?

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

Przede wszystkim prawdopodobnie chcesz dodać nameatrybut do przycisków opcji. W przeciwnym razie nie należą do tej samej grupy i można zaznaczyć wiele przycisków opcji.

Ponadto, ponieważ umieściłem etykiety jako rodzeństwo (przycisków radiowych), musiałem użyć atrybutów idi, foraby powiązać je ze sobą.

Jeśli naprawdę chcesz umieścić pola wyboru wewnątrz etykiety, spróbuj dodać dodatkowy tag span, np.

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

Spowoduje to ustawienie tła dla całego rodzeństwa wybranego przycisku opcji.

Używasz sąsiedniego selektora rodzeństwa ( +), gdy elementy nie są rodzeństwem. Etykieta jest rodzicem wejścia, a nie rodzeństwem.

CSS nie ma możliwości wybrania elementu na podstawie jego elementów potomnych (ani niczego, co po nim następuje).

Aby rozwiązać ten problem, musisz spojrzeć na JavaScript.

Alternatywnie zmień rozmieszczenie znaczników:

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

Możesz dodać zakres do html i css.

Oto przykład z mojego kodu ...

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, aby standardowy przycisk opcji zniknął na ekranie i nałożył niestandardowy obraz przycisku:

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

Ponieważ obecnie nie ma rozwiązania CSS do stylizacji rodzica, używam tutaj prostego jQuery, aby dodać klasę do etykiety z zaznaczonymi danymi wejściowymi w niej.

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

Nie zapomnij podać etykietę wstępnie sprawdzane wejście w klasie checkedlabelzbyt

Oto dostępne rozwiązanie

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>