CSS-Auswahl für die Beschriftung eines aktivierten Optionsfelds

Ist es möglich, einen CSS (3) -Stil auf eine Beschriftung eines aktivierten Optionsfelds anzuwenden?

Ich habe das folgende Markup:

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

Was ich gehofft habe ist das

label:checked { font-weight: bold; }

würde etwas tun, aber leider nicht (wie ich erwartet hatte).

Gibt es einen Selektor, der diese Art von Funktionalität erreichen kann? Sie können mit divs usw. umgeben, wenn dies hilft, aber die beste Lösung wäre eine, die das Attribut label '' for '' verwendet.

Es sollte beachtet werden, dass ich Browser für meine Anwendung angeben kann, also bitte die beste Klasse CSS3 usw.

Versuchen Sie das +Symbol: Es ist ein benachbarter Geschwisterkombinator. Es kombiniert zwei Sequenzen einfacher Selektoren mit demselben Elternteil und die zweite muss SOFORT nach der ersten kommen.

So wie:

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

funktioniert sehr gut für das folgende Markup:

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

... und es funktioniert für jede Struktur, mit oder ohne Divs usw., solange das Etikett dem Radioeingang folgt.

Beispiel:

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>

Ich weiß, dass dies eine alte Frage ist, aber wenn Sie möchten, dass Sie <input>ein Kind sind, <label>anstatt sie getrennt zu haben, finden Sie hier eine reine CSS-Methode, mit der Sie dies erreichen können:

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

Dann wickeln Sie den Text einfach mit einem <span>:

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

Sehen Sie es auf JSFiddle .

Ich habe vergessen, wo ich es zum ersten Mal erwähnt habe, aber Sie können Ihre Etiketten tatsächlich an anderer Stelle in einen Container einbetten, solange Sie das for=Attribut festgelegt haben. Schauen wir uns also ein Beispiel für SO an:

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

Wütend. Das war viel für ein "Sample", aber ich denke, es treibt den Effekt und den Punkt wirklich nach Hause: Wir können sicherlich ein Label für ein geprüftes Eingabesteuerelement auswählen, ohne dass es ein Geschwister ist. Das Geheimnis liegt darin , die inputTags für ein Kind nur so zu halten, wie es sein muss (in diesem Fall nur für das bodyElement) .

Da das labelElement den :checkedPseudo-Selektor nicht verwendet, spielt es keine Rolle, dass die Beschriftungen im gespeichert sind header. Es hat den zusätzlichen Vorteil, dass headerwir , da es sich um ein Geschwisterelement handelt, den ~generischen Geschwister-Selektor verwenden können, um vom input[type=radio]:checkedDOM-Element in den headerContainer zu wechseln, und dann Nachkommen- / Kind-Selektoren verwenden können, um auf die labels selbst zuzugreifen und sie zu formatieren, wenn sie vorhanden sind entsprechende Optionsfelder / Kontrollkästchen sind aktiviert .

Wir können nicht nur die Beschriftungen formatieren, sondern auch andere Inhalte, die möglicherweise Nachkommen eines Geschwistercontainers sind, relativ zu allen inputs. Und jetzt für den Moment, auf den Sie alle gewartet haben, das JSFIDDLE ! Gehen Sie dorthin, spielen Sie damit, lassen Sie es für Sie arbeiten, finden Sie heraus, warum es funktioniert, brechen Sie es, tun Sie, was Sie tun!

Hoffentlich macht das alles Sinn und beantwortet die Frage und möglicherweise alle möglichen Folgemaßnahmen vollständig.

Wenn Ihre Eingabe ein untergeordnetes Element von ist labelund Sie mehr als eine Bezeichnung haben, können Sie den Trick von @ Mike mit Flexbox+ kombinieren 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 }

Sehen Sie es auf JSFiddle .

Hinweis: Die Geschwisterauswahl funktioniert nur innerhalb desselben übergeordneten Elements. Um dies zu umgehen , können Sie die Eingabe mithilfe des @ Nathan Blair- Hacks auf oberster Ebene ausblenden .

Sie könnten ein bisschen jQuery verwenden:

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

Sie müssen sicherstellen, dass Ihre aktivierten Optionsfelder auch beim Laden der Seite die richtige Klasse haben.

AKTUALISIEREN:

Dies funktionierte nur für mich, weil unser vorhandenes generiertes HTML verrückt war, labels zusammen mit radios generierte und beiden checkedAttributen gab.

Egal, und ein großes Lob für Brilliand, dass er es angesprochen hat!

Wenn Ihr Etikett ein Geschwister eines Kontrollkästchens ist (was normalerweise der Fall ist), können Sie den ~Geschwister-Selektor und a verwenden label[for=your_checkbox_id], um es zu adressieren ... oder dem Etikett eine ID geben, wenn Sie mehrere Etiketten haben (wie in diesem Beispiel, in dem ich Beschriftungen für Schaltflächen verwenden)

Kam hierher, um das Gleiche zu suchen - fand aber meine Antwort in den Dokumenten .

Ein labelElement mit checkedAttribut kann wie folgt ausgewählt werden:

label[checked] {
  ...
}

Ich weiß, dass es eine alte Frage ist, aber vielleicht hilft es jemandem da draußen :)