CSS-Selektor für ein Etikett der geprüft Optionsfeldes

Question

Ist es möglich, eine CSS (3) Stil auf ein Etikett eines geprüftes Optionsfeldes anwenden?

Ich habe folgendes Markup:

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

Was ich hatte gehofft, dass

label:checked { font-weight: bold; }

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

Sie haben einen Selektor, der diese Art von Funktionalität erreichen können? Sie können mit divs umgeben etc, ob das hilft, aber die beste Lösung wäre eine, die das Etikett ‚‘ für ‚‘ Attribut verwendet.

Es ist zu beachten, dass ich in der Lage bin Browser für meine Anwendung zu spezifizieren, also am besten der Klasse css3 etc bitte.

Answer 1

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 wird für jede Struktur zu arbeiten, mit oder ohne divs etc, solange das Etikett des 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>

Answer 2

Ich weiß, dass dies eine alte Frage, aber wenn Sie die <input> ein Kind von <label> haben mögen sein, anstatt sie trennen zu müssen, hier ist eine reine CSS Art und Weise, dass Sie es erreichen können:

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

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

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

Sehen Sie es auf JSFiddle .

Answer 3

ich vergessen, wo ich es erwähnt zum ersten Mal sah, aber Sie können Ihre Etiketten in einem Behälter tatsächlich einbetten anderswo, solange Sie das for= Attribut gesetzt haben. Also, lassen Sie uns eine Probe Besuche auf 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>

Puh. Das war viel Geld für eine „Probe“ aber ich fühle es wirklich fährt nach Hause, die Wirkung und Punkt: wir sicherlich ein Etikett für eine kontrollierte Eingabesteuerung auswählen können, ohne sie ein Geschwisterkind zu sein. Das Geheimnis liegt in die input halten Tags ein Kind nur das, was sie sein müssen. (In diesem Fall - nur das body Element)

Da das label Element tatsächlich nicht die :checked Pseudo-Selektor verwenden, spielt es keine Rolle, dass die Etiketten in der header gespeichert sind. Es hat den zusätzlichen Vorteil hat, dass seit dem header ein Geschwisterelement ist, dass wir das ~ generic Geschwister-Selektor können aus dem input[type=radio]:checked DOM-Elemente mit dem header Behälter zu bewegen und dann Nachkommen / Kind-Selektoren verwenden, um den labels selbst zugreifen, erlaubt die Fähigkeit, sie zu gestalten, wenn ihre jeweiligen Funkbox / Kontrollkästchen ausgewählt werden .

Wir können nicht nur die Etiketten Stil, sondern auch Stil andere Inhalte, die alle der inputs Nachkommen eines Geschwisters Behälters relativ sein kann. Und jetzt für den Moment haben Sie alle gewartet haben, die JSFIDDLE ! Gehen Sie dort hin, mit ihm spielen, machen es für Sie arbeiten, herauszufinden, warum es funktioniert, brechen es, das tun, was Sie tun!

Wir hoffen, dass alle Sinn macht und Antworten vollständig die Frage und möglicherweise alle folgen ups, die auftauchen können.

Answer 4

Wenn Sie Ihre Eingabe ein untergeordnetes Element des label ist, und Sie haben mehr als eine Etiketten, können Sie a href kombinieren <= "https://stackoverflow.com/questions/1431726/css-selector-for-a-checked -Radio-Tasten-label / 17206675 # 17206675" > @ Mike Trick mit Flexbox + order.

html

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

css

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: Geschwister Wähler nur innerhalb derselben Mutter funktioniert. Um dies zu umgehen, können Sie die Eingabe auf der obersten Ebene versteckt machen mit @ Nathan Blair Hack.

Answer 5

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 auf Ihren geprüften Radio-Buttons stellen Sie sicher, auch die richtige Klasse beim Laden der Seite haben.

Answer 6

UPDATE:

Dies ist nur für mich gearbeitet, weil unsere bestehenden generierten HTML abgedrehten war, labels zusammen mit radios zu erzeugen und sie beide checked Attribut geben.

Es macht nichts, und große Höhen für Brilliand zu bringen it up!

Wenn Ihr Etikett ein Geschwister eines Checkbox ist (was normalerweise der Fall ist), können Sie die ~ Geschwister-Selektor und ein label[for=your_checkbox_id] es zu adressieren ... oder das Etikett eine ID geben, wenn Sie mehrere Labels haben (wie in diesem Beispiel wo ich Etiketten für Tasten)

---

Wir waren hier für den gleichen sucht - aber am Ende zu finden, meine Antwort in der docs .

ein label Element mit checked Attribute kann wie so gewählt werden:

label[checked] {
  ...
}

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