CSS - วิธีจัดรูปแบบเลเบลปุ่มแบบเรดิโอที่เลือก?

ฉันต้องการเพิ่มสไตล์ให้กับป้ายกำกับที่เลือกของปุ่มตัวเลือก:

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

ความคิดใดที่ฉันทำผิด

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

ก่อนอื่นคุณอาจต้องการเพิ่มแอnameททริบิวในปุ่มตัวเลือก ไม่เช่นนั้นจะไม่ได้อยู่ในกลุ่มเดียวกันและสามารถเลือกปุ่มตัวเลือกได้หลายปุ่ม

นอกจากนี้เนื่องจากฉันวางป้ายกำกับเป็นพี่น้อง (ของปุ่มตัวเลือก) ฉันจึงต้องใช้คุณลักษณะidและforเพื่อเชื่อมโยงเข้าด้วยกัน

หากคุณต้องการใส่ช่องทำเครื่องหมายภายในป้ายกำกับให้ลองเพิ่มแท็กสแปนเพิ่มเติมเช่น

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

ที่จะกำหนดพื้นหลังสำหรับพี่น้องทั้งหมดของปุ่มตัวเลือกที่เลือก

คุณกำลังใช้ตัวเลือกพี่น้องที่อยู่ติดกัน ( +) เมื่อองค์ประกอบไม่ใช่พี่น้อง ฉลากเป็นผู้ปกครองของการป้อนข้อมูลที่ไม่ได้มันเป็นพี่น้อง

CSS ไม่มีวิธีในการเลือกองค์ประกอบที่ขึ้นอยู่กับผู้สืบทอด (หรืออะไรก็ตามที่ตามมา)

คุณจะต้องมองหา JavaScript เพื่อแก้ไขปัญหานี้

หรือจัดเรียงมาร์กอัปของคุณใหม่:

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

คุณสามารถเพิ่มช่วงใน html และ css ของคุณ

นี่คือตัวอย่างจากรหัสของฉัน ...

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 เพื่อทำให้ปุ่มตัวเลือกมาตรฐานหายไปบนหน้าจอและวางรูปปุ่มที่กำหนดเองใหม่:

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

เนื่องจากขณะนี้ยังไม่มีวิธีแก้ปัญหา CSS เพื่อกำหนดรูปแบบผู้ปกครองฉันใช้ jQuery แบบง่าย ๆ ที่นี่เพื่อเพิ่มคลาสให้กับเลเบลที่มีอินพุตที่ตรวจสอบอยู่ภายใน

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

อย่าลืมที่จะให้ฉลากของอินพุตที่ตรวจสอบล่วงหน้าcheckedlabelด้วยเช่นกัน

นี่คือทางออกที่เข้าถึงได้

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>