Pemilih CSS untuk label tombol radio yang dicentang

Apakah mungkin untuk menerapkan gaya css (3) ke label tombol radio yang dicentang?

Saya memiliki markup berikut:

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

Apa yang saya harapkan adalah itu

label:checked { font-weight: bold; }

akan melakukan sesuatu, tetapi sayangnya tidak (seperti yang saya harapkan).

Apakah ada pemilih yang dapat mencapai fungsi semacam ini? Anda dapat mengelilingi dengan divs dll jika itu membantu, tetapi solusi terbaik adalah yang menggunakan atribut label '' untuk ''.

Perlu dicatat bahwa saya dapat menentukan browser untuk aplikasi saya, jadi yang terbaik dari kelas css3 dll tolong.

coba +simbol: Ini adalah kombinator saudara yang berdekatan. Ini menggabungkan dua urutan penyeleksi sederhana yang memiliki induk yang sama dan yang kedua harus SEGERA setelah yang pertama.

Dengan demikian:

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

berfungsi sangat baik untuk markup berikut:

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

... dan itu akan berfungsi untuk struktur apa pun, dengan atau tanpa divs dll selama label mengikuti input radio.

Contoh:

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>

Saya tahu ini adalah pertanyaan lama, tetapi jika Anda ingin menjadikannya <input>sebagai anak <label>alih-alih memisahkan mereka, berikut adalah cara CSS murni yang dapat Anda capai:

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

Kemudian cukup bungkus teks dengan <span>:

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

Lihat di JSFiddle .

Saya lupa di mana saya pertama kali melihatnya disebutkan tetapi Anda benar-benar dapat menempelkan label Anda dalam wadah di tempat lain selama Anda memiliki for=set atribut. Jadi, mari kita periksa sampel pada 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>

Wah. Itu banyak untuk "sampel" tapi saya merasa itu benar-benar mendorong pulang efek dan titik: kita tentu dapat memilih label untuk kontrol input yang diperiksa tanpa menjadi saudara. Rahasianya terletak pada menjaga inputtag seorang anak hanya untuk apa yang mereka butuhkan (dalam hal ini - hanya bodyelemen) .

Karena labelelemen tersebut tidak benar-benar memanfaatkan :checkedpemilih semu, tidak masalah bahwa label disimpan di header. Itu memang memiliki manfaat tambahan bahwa karena headermerupakan elemen saudara kita dapat menggunakan ~pemilih saudara generik untuk berpindah dari input[type=radio]:checkedelemen DOM ke headerwadah dan kemudian menggunakan penyeleksi keturunan / anak untuk mengakses labels sendiri, memungkinkan kemampuan untuk menata mereka ketika mereka masing-masing kotak radio / kotak centang dipilih .

Kami tidak hanya dapat menata label, tetapi juga menata konten lain yang mungkin merupakan keturunan dari saudara kandung relatif terhadap semua label input. Dan sekarang untuk saat ini Anda semua sudah menunggu, JSFIDDLE ! Pergi ke sana, bermainlah dengannya, buatlah itu bekerja untuk Anda, cari tahu mengapa itu berhasil, hancurkan, lakukan apa yang Anda lakukan!

Semoga semua masuk akal dan sepenuhnya menjawab pertanyaan dan mungkin tindak lanjut yang mungkin muncul.

Jika input Anda adalah elemen turunan dari labeldan Anda memiliki lebih dari satu label, Anda dapat menggabungkan trik @ Mike dengan Flexbox+ order.

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

Lihat di JSFiddle .

Catatan: Pemilih saudara hanya bekerja di dalam orang tua yang sama. Untuk mengatasi ini, Anda dapat membuat input disembunyikan di tingkat atas menggunakan hack @Nathan Blair .

Anda bisa menggunakan sedikit jQuery:

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

Anda harus memastikan bahwa tombol radio yang Anda periksa memiliki kelas yang benar pada pemuatan halaman juga.

MEMPERBARUI:

Ini hanya bekerja untuk saya karena html yang dihasilkan kami sudah aneh, menghasilkan labels bersama dengan radios dan memberi mereka berdua checkedatribut.

Sudahlah, dan hal-hal besar bagi Brilliand karena mengungkitnya!

Jika label Anda adalah saudara kandung dari kotak centang (yang biasanya merupakan kasus), Anda dapat menggunakan ~pemilih saudara, dan a label[for=your_checkbox_id]untuk mengatasinya ... atau beri label id jika Anda memiliki banyak label (seperti dalam contoh ini di mana saya gunakan label untuk tombol)

Datang ke sini mencari yang sama - tetapi akhirnya menemukan jawaban saya di dokumen .

sebuah labelelemen dengan checkedatribut dapat dipilih seperti:

label[checked] {
  ...
}

Saya tahu ini pertanyaan lama, tapi mungkin itu membantu seseorang di luar sana :)