CSS - Làm cách nào để tạo kiểu cho nhãn nút radio đã chọn?

Tôi muốn thêm kiểu vào nhãn đã chọn của nút 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;
}

Bất cứ ý tưởng những gì tôi đang làm sai?

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

Trước hết, bạn có thể muốn thêm namethuộc tính trên các nút radio. Mặt khác, chúng không phải là một phần của cùng một nhóm và có thể kiểm tra nhiều nút radio.

Ngoài ra, vì tôi đã đặt các nhãn là anh chị em (của các nút radio), tôi phải sử dụng các thuộc tính idvà forđể liên kết chúng lại với nhau.

Nếu bạn thực sự muốn đặt các hộp kiểm bên trong nhãn, hãy thử thêm thẻ span, ví dụ:

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

Điều đó sẽ đặt nền cho tất cả anh chị em của nút radio đã chọn.

Bạn đang sử dụng bộ chọn anh chị em liền kề ( +) khi các thành phần không phải là anh chị em. Nhãn là cha mẹ của đầu vào, không phải là anh chị em.

CSS không có cách nào để chọn một phần tử dựa trên hậu duệ của nó (cũng không có gì theo sau nó).

Bạn sẽ cần tìm đến JavaScript để giải quyết vấn đề này.

Ngoài ra, sắp xếp lại đánh dấu của bạn:

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

Bạn có thể thêm một khoảng vào html và css của bạn.

Đây là một ví dụ từ mã của tôi ...

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 để làm cho nút radio tiêu chuẩn biến mất trên màn hình và chồng hình ảnh nút tùy chỉnh:

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

Vì hiện tại không có giải pháp CSS nào để định kiểu cha mẹ, tôi sử dụng một jQuery đơn giản ở đây để thêm một lớp vào nhãn với đầu vào được kiểm tra bên trong nó.

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

Đừng quên để cung cấp cho nhãn trước kiểm tra đầu vào của lớp checkedlabelquá

Đây là một giải pháp dễ tiếp cận

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>