İşaretli bir radyo düğmesinin etiketi için CSS seçici

İşaretli bir radyo düğmesinin etiketine css (3) stili uygulamak mümkün müdür?

Aşağıdaki biçimlendirme var:

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

Umduğum şey şu ki

label:checked { font-weight: bold; }

bir şey yapardı, ama ne yazık ki (beklediğim gibi).

Bu tür bir işlevsellik sağlayabilecek bir seçici var mı? Bu yardımcı olursa divs vb. İle çevreleyebilirsiniz, ancak en iyi çözüm '' for '' özelliğini kullanan bir çözüm olacaktır.

Uygulamam için tarayıcıları belirleyebileceğime dikkat etmeliyim, bu yüzden sınıf css3 vb. En iyisi lütfen.

şu +sembolü deneyin : Bitişik kardeş birleştirici. Aynı ana öğeye sahip iki basit seçici dizisini birleştirir ve ikincisi HEMEN ilkinden sonra gelmelidir .

Gibi:

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

aşağıdaki biçimlendirme için çok güzel çalışıyor:

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

... etiket radyo girişini takip ettiği sürece div vb. olan veya olmayan herhangi bir yapı için çalışır.

Misal:

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>

Bunun eski bir soru olduğunu biliyorum, ama onları ayrı tutmak yerine <input>bir çocuk <label>olmak istiyorsanız, işte bunu başarabileceğiniz saf bir CSS yolu:

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

Ardından metni bir ile sarın <span>:

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

JSFiddle'da görün .

Bahsettiğim yeri ilk gördüğüm şeyi unuttum, ancak etiketlerinizi for=öznitelik ayarladığınız sürece başka bir yere başka bir kaba yerleştirebilirsiniz. Öyleyse, SO'daki bir örneği kontrol edelim:

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

Whew. Bu bir "örnek" için çok şeydi ama gerçekten eve etki ve nokta yönlendirir hissediyorum: biz kesinlikle bir kardeşi olmadan kontrol giriş kontrolü için bir etiket seçebilirsiniz. İşin sırrı , inputetiketleri yalnızca olması gereken şeye (bu durumda yalnızca bodyöğe) bir çocuk tutmaktır .

Yana labeleleman aslında kullanmaz :checkedsözde seçici, etiketlerin saklanır fark etmez header. O zamandan beri ekledi yararı var headerkardeş unsurdur kullanabileceğimiz ~taşınmaya jenerik kardeş seçici input[type=radio]:checkedDOM öğesinin headererişmek için soyundan / çocuk seçicileri kullanabilirsiniz ardından konteyner ve labelkendilerini s onları ne zaman stil yeteneğini sağlayan onların ilgili radyo kutuları / onay kutuları seçilir .

Etiketleri yalnızca stil olarak değil, aynı zamanda tüm kardeşlere göre bir kardeş kabının torunları olabilecek diğer içerikleri de stilize edebiliriz input. Ve şimdi beklediğiniz an için JSFIDDLE ! Oraya gidin, onunla oynayın, sizin için çalışmasını sağlayın, neden çalıştığını öğrenin, kırın, ne yaptığınızı yapın!

Umarım herkes mantıklı ve soruyu tamamen cevaplar ve muhtemelen ortaya çıkabilecek herhangi bir takip.

Girişiniz alt öğesiyse labelve birden fazla etiketiniz varsa, @ Mike'ın numarasınıFlexbox + ile birleştirebilirsiniz 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 }

JSFiddle'da görün .

not: kardeş seçici sadece aynı ebeveyn içinde çalışır. Bu sorunu gidermek için @Nathan Blair kesmek kullanarak girdiyi en üst düzeyde gizleyebilirsiniz .

Biraz jQuery kullanabilirsiniz:

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

İşaretli radyo düğmelerinizin sayfa yüklemesinde de doğru sınıfa sahip olduğundan emin olmanız gerekir.

GÜNCELLEME:

Bu sadece benim için çalıştı çünkü mevcut oluşturulan html labels ile birlikte radios üreten ve her iki checkedözniteliği tuhaf .

Boş ver, ve Brilliand'ı büyüttüğü için büyük ups!

Etiket (genellikle böyledir) bir onay kutusu bir kardeş ise, kullanabileceğiniz ~kardeş seçici ve label[for=your_checkbox_id]onu ele ... ya da bu gibi (birden çok etiket varsa etiket bir kimlik vermek için örnek nerede düğmeler için etiketler kullanın)

Buraya aynı şeyi aradım - ama dokümanlardaki cevabımı buldum .

özniteliğe labelsahip bir öğe checkedşu şekilde seçilebilir:

label[checked] {
  ...
}

Eski bir soru olduğunu biliyorum, ama belki orada birine yardımcı olur :)