Seçilen Radyo Düğmeleri Etiket Stil nasıl?

Bir radyo düğmesinin seçili etiketine bir stil eklemek istiyorum:

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

Yanlış yaptığım hakkında bir fikrin var mı?

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

Her şeyden önce, muhtemelen nameradyo düğmelerine nitelik eklemek istersiniz . Aksi takdirde, aynı grubun bir parçası değildir ve birden fazla radyo düğmesi kontrol edilebilir.

Ayrıca, etiketleri (radyo düğmelerinin) kardeşleri olarak yerleştirdiğim için, bunları ilişkilendirmek için idve forözelliklerini kullanmak zorunda kaldım .

Onay kutularını gerçekten etiketin içine koymak istiyorsanız, ek bir yayılma etiketi eklemeyi deneyin, örn.

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

Bu, seçilen radyo düğmesinin tüm kardeşleri için arka planları ayarlayacaktır.

+Öğeler kardeş olmadığında bitişik bir kardeş seçici ( ) kullanıyorsunuz . Etiket, kardeşin değil girişin üst öğesidir.

CSS'nin, alt öğelerine (veya onu izleyen herhangi bir şeye) dayalı bir öğe seçmenin yolu yoktur.

Bunu çözmek için JavaScript'e bakmanız gerekir.

Alternatif olarak, işaretlemenizi yeniden düzenleyin:

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

HTML ve css'nize bir yayılma alanı ekleyebilirsiniz.

İşte benim kodumdan bir örnek ...

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, standart radyo düğmesinin ekranda yok olmasını sağlamak ve özel düğme görüntüsünü üst üste getirmek için:

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

Şu anda bir ebeveyni şekillendirmek için CSS çözümü olmadığından, içinde kontrol girişi olan bir etikete bir sınıf eklemek için basit bir jQuery kullanıyorum.

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

Sınıf önceden işaretlenmiş girişin etiketi vermek unutmayın checkedlabelçok

İşte erişilebilir bir çözüm

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>