ตัวเลือก CSS สำหรับป้ายกำกับของปุ่มตัวเลือก

เป็นไปได้หรือไม่ที่จะใช้สไตล์ css (3) กับป้ายกำกับของปุ่มตัวเลือกที่เลือก?

ฉันมีมาร์กอัปต่อไปนี้:

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

สิ่งที่ฉันหวังคือ

label:checked { font-weight: bold; }

จะทำอะไรบางอย่าง แต่ก็ไม่ใช่ (อย่างที่ฉันคาดไว้)

มีตัวเลือกที่สามารถใช้ฟังก์ชันนี้ได้หรือไม่? คุณอาจล้อมรอบด้วย divs ฯลฯ หากมีสิ่งใดช่วยได้ แต่ทางออกที่ดีที่สุดคือโซลูชันที่ใช้ป้ายกำกับ '' for ''

ควรสังเกตว่าฉันสามารถระบุเบราว์เซอร์สำหรับแอปพลิเคชันของฉันดังนั้นโปรดใช้คลาส css3 และอื่น ๆ

ลอง+สัญลักษณ์: มันคือ combinator พี่น้องที่อยู่ติดกัน มันรวมสองซีเควนซ์ของซีเลเตอร์เรียบง่ายที่มีพาเรนต์เดียวกันและอันที่สองต้องมาทันทีหลังจากตัวแรก

เช่นนี้:

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked 

ทำงานได้ดีมากสำหรับมาร์กอัปต่อไปนี้:

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

... และมันจะทำงานสำหรับโครงสร้างใด ๆ ที่มีหรือไม่มี divs ฯลฯ ตราบใดที่ฉลากติดกับอินพุตของวิทยุ

ตัวอย่าง:

input[type="radio"]:checked+label { font-weight: bold; }

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ถ้าคุณต้องการมี<input>ลูก<label>แทนที่จะแยกพวกเขานี่เป็นวิธี CSS ที่บริสุทธิ์ที่คุณสามารถทำได้:

:checked + span { font-weight: bold; }

จากนั้นเพียงแค่ตัดข้อความด้วย<span>:

<label>
   <input type="radio" name="test" />
   <span>Radio number one</span>
</label>

เห็นมันบนJSFiddle

ฉันลืมที่ฉันเห็นครั้งแรกที่กล่าวถึง แต่คุณสามารถฝังป้ายกำกับของคุณในภาชนะอื่น ๆ ตราบใดที่คุณมีfor=ชุดคุณลักษณะ ดังนั้นลองตรวจสอบตัวอย่างจาก SO:

* {
  padding: 0;
  margin: 0;
  background-color: #262626;
  color: white;
}

.radio-button {
  display: none;
}

#filter {
  display: flex;
  justify-content: center;
}

.filter-label {
  display: inline-block;
  border: 4px solid green;
  padding: 10px 20px;
  font-size: 1.4em;
  text-align: center;
  cursor: pointer;
}

main {
  clear: left;
}

.content {
  padding: 3% 10%;
  display: none;
}

h1 {
  font-size: 2em;
}

.date {
  padding: 5px 30px;
  font-style: italic;
}

.filter-label:hover {
  background-color: #505050;
}

#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
  background-color: green;
}

#featured-radio:checked~main .featured {
  display: block;
}

#personal-radio:checked~main .personal {
  display: block;
}

#tech-radio:checked~main .tech {
  display: block;
}

<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">

<header id="filter">
  <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
  <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
  <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>

<main>
  <article class="content featured tech">
    <header>
      <h1>Cool Stuff</h1>
      <h3 class="date">Today</h3>
    </header>

    <p>
      I'm showing cool stuff in this article!
    </p>
  </article>

  <article class="content personal">
    <header>
      <h1>Not As Cool</h1>
      <h3 class="date">Tuesday</h3>
    </header>

    <p>
      This stuff isn't nearly as cool for some reason :(;
    </p>
  </article>

  <article class="content tech">
    <header>
      <h1>Cool Tech Article</h1>
      <h3 class="date">Last Monday</h3>
    </header>

    <p>
      This article has awesome stuff all over it!
    </p>
  </article>

  <article class="content featured personal">
    <header>
      <h1>Cool Personal Article</h1>
      <h3 class="date">Two Fridays Ago</h3>
    </header>

    <p>
      This article talks about how I got a job at a cool startup because I rock!
    </p>
  </article>
</main>

ต๊าย นั่นเป็นจำนวนมากสำหรับ "ตัวอย่าง" แต่ฉันรู้สึกว่ามันส่งผลและจุดกลับบ้านอย่างแท้จริง: เราสามารถเลือกฉลากสำหรับการควบคุมอินพุตที่ตรวจสอบได้โดยไม่ต้องเป็นพี่น้อง ความลับอยู่ในการรักษาinputแท็กเด็กที่จะเพียง แต่สิ่งที่พวกเขาจะต้อง (ในกรณีนี้ - เพียงbodyองค์ประกอบ)

เนื่องจากlabelองค์ประกอบไม่จริงใช้เลือกหลอกมันไม่สำคัญว่าป้ายจะถูกเก็บไว้ใน:checked headerมันมีประโยชน์เพิ่มเติมที่เนื่องจากheaderเป็นองค์ประกอบพี่น้องเราสามารถใช้~ตัวเลือกพี่น้องทั่วไปเพื่อย้ายจากinput[type=radio]:checkedองค์ประกอบ DOM ไปยังheaderคอนเทนเนอร์แล้วใช้ตัวเลือกลูกหลาน / ลูกหลานเพื่อเข้าถึงlabelตัวเองทำให้พวกเขาสามารถจัดรูปแบบพวกเขาเมื่อพวกเขา กล่องวิทยุที่เกี่ยวข้อง / ช่องทำเครื่องหมายได้รับการคัดเลือก

ไม่เพียง แต่เราสามารถจัดรูปแบบป้าย แต่ยังเนื้อหาอื่น ๆ สไตล์ที่อาจจะเป็นลูกหลานของภาชนะพี่น้องญาติทั้งหมดของinputs และตอนนี้คุณก็รอคอยJSFIDDLE ! ไปที่นั่นเล่นกับมันทำให้มันใช้ได้ผลสำหรับคุณค้นหาสาเหตุที่ใช้งานได้ทำลายมันทำสิ่งที่คุณทำ!

หวังว่าทุกคนจะสมเหตุสมผลและตอบคำถามได้อย่างเต็มที่และอาจมีการติดตามผลใด ๆ ที่อาจทำให้เกิดปัญหา

หากใส่ของคุณเป็นองค์ประกอบลูกของlabelคุณมีมากกว่าหนึ่งป้ายคุณสามารถรวม@ เคล็ดลับของไมค์กับ+Flexboxorder

<label class="switchLabel">
  <input type="checkbox" class="switch"/>
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }

เห็นมันบนJSFiddle

หมายเหตุ: ตัวเลือกพี่น้องใช้งานได้เฉพาะภายในพาเรนต์เดียวกัน ในการหลีกเลี่ยงปัญหานี้คุณสามารถซ่อนอินพุตที่ระดับบนสุดโดยใช้@Nathan Blair hack

คุณสามารถใช้ jQuery ได้เล็กน้อย:

$('input:radio').click(function(){
    $('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});

คุณต้องตรวจสอบให้แน่ใจว่าปุ่มตัวเลือกของคุณมีคลาสที่ถูกต้องในการโหลดหน้าเว็บเช่นกัน

UPDATE:

สิ่งนี้ใช้ได้กับฉันเท่านั้นเนื่องจาก html ที่สร้างขึ้นในปัจจุบันของเรานั้นแปลกประหลาดสร้างlabels พร้อมกับradioให้ทั้งสองcheckedคุณลักษณะ

ไม่เป็นไรและอัพครั้งใหญ่สำหรับ Brilliand ที่นำมันขึ้นมา!

หากป้ายกำกับของคุณเป็นพี่น้องของช่องทำเครื่องหมาย (ซึ่งมักจะเป็นกรณี) คุณสามารถใช้~ตัวเลือกพี่น้องและlabel[for=your_checkbox_id]เพื่อรับมือกับมัน ... หรือให้ฉลากรหัสถ้าคุณมีป้ายกำกับหลาย (เช่นในเรื่องนี้เช่นที่ฉัน ใช้ป้ายกำกับสำหรับปุ่ม)

มาที่นี่มองหาเหมือนกัน - แต่จบลงด้วยการหาคำตอบของฉันในเอกสาร

labelองค์ประกอบที่มีcheckedแอตทริบิวต์ที่สามารถเลือกได้เช่นดังนั้น:

label[checked] {
  ...
}

ฉันรู้ว่ามันเป็นคำถามเก่า แต่บางทีมันอาจช่วยใครบางคนที่นั่น :)