CSS - Bagaimana Menata Label Tombol Radio yang Dipilih?

Saya ingin menambahkan gaya ke label pilihan tombol 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;
}

Ada ide apa yang saya lakukan salah?

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

Pertama-tama, Anda mungkin ingin menambahkan nameatribut pada tombol radio. Jika tidak, mereka bukan bagian dari grup yang sama, dan beberapa tombol radio dapat dicentang.

Juga, karena saya menempatkan label sebagai saudara (dari tombol radio), saya harus menggunakan atribut iddan foruntuk mengaitkannya bersama.

Jika Anda benar-benar ingin meletakkan kotak centang di dalam label, coba tambahkan tag span ekstra, mis.

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

Itu akan mengatur latar belakang untuk semua saudara dari tombol radio yang dipilih.

Anda menggunakan pemilih saudara yang berdekatan ( +) jika elemen bukan saudara kandung. Label adalah induk dari input, bukan saudara kandungnya.

CSS tidak memiliki cara untuk memilih elemen berdasarkan turunannya (atau apapun yang mengikutinya).

Anda harus melihat ke JavaScript untuk menyelesaikan ini.

Atau, atur ulang markup Anda:

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

Anda dapat menambahkan span ke html dan css Anda.

Ini contoh dari kode saya ...

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 untuk menghilangkan tombol radio standar di layar dan menambahkan gambar tombol kustom:

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

Karena saat ini tidak ada solusi CSS untuk memberi gaya pada orang tua, saya menggunakan jQuery sederhana di sini untuk menambahkan kelas ke label dengan input yang dicentang di dalamnya.

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

Jangan lupa untuk memberi label pada input yang sudah diperiksa sebelumnya kelas checkedlabeljuga

Inilah solusi yang dapat diakses

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>