it-swarm.com.de

CSS-Auswahl für die Beschriftung eines aktivierten Optionsfelds

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

Ich habe folgendes 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 Wähler, der diese Art von Funktionalität erreichen kann? Sie können mit divs etc umgeben, wenn dies hilft, aber die beste Lösung wäre eine, die das Attribut '' für '' verwendet.

Es sollte beachtet werden, dass ich Browser für meine Anwendung angeben kann.

188
Stephen
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 folgendes 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 Label 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>

312
Stephen

Ich weiß, dass dies eine alte Frage ist, aber wenn Sie möchten, dass <input> ein Kind von <label> ist, anstatt sie getrennt zu haben, ist hier ein reiner CSS-Weg, wie Sie es erreichen könnten:

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

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

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

Siehe auf JSFiddle .

105
Mike

Ich habe vergessen, wo ich es zum ersten Mal gesehen habe, aber Sie können Ihre Etiketten auch in einen anderen Container einbetten, solange Sie das for= Attributmenge. Schauen wir uns also ein Beispiel zu 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 eine Menge für ein "Sample", aber ich denke, es bringt den Effekt und den Punkt auf den Punkt: Wir können mit Sicherheit eine Beschriftung für ein geprüftes Eingabesteuerelement auswählen, ohne dass es ein Geschwister ist. Das Geheimnis liegt darin, dass die Tags input einem untergeordneten Element nur das zuweist, was es sein muss (in diesem Fall nur das Element body) .

Da das label -Element das :checked Pseudo-Selektor, es spielt keine Rolle, dass die Bezeichnungen im header gespeichert sind. Es hat den zusätzlichen Vorteil, dass wir, da das header ein Geschwisterelement ist, das ~ Allgemeiner Geschwister-Selektor zum Verschieben von input[type=radio]:checked DOM-Element in den header -Container und verwenden Sie dann die Auswahlmöglichkeiten für Nachkommen/Untergeordnete, um auf die labels selbst zuzugreifen . Kontrollkästchen sind aktiviert .

Wir können nicht nur die Beschriftungen formatieren, sondern auch andere Inhalte, die möglicherweise im Verhältnis zu allen inputs Nachkommen eines Geschwistercontainers sind. Und jetzt für den Moment, auf den Sie alle gewartet haben, die 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 Folgemaßnahmen, die auftauchen könnten, vollständig.

18
Nathan Blair

Wenn Ihre Eingabe ein untergeordnetes Element von label ist und Sie mehr als eine Beschriftung haben, können Sie @ Mikes Trick mit Flexbox + order kombinieren.

 enter image description here

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

Siehe auf JSFiddle .

note: Geschwisterauswahl funktioniert nur innerhalb desselben übergeordneten Elements. Um dies zu umgehen, können Sie die Eingabe mit @Nathan Blair hack auf oberster Ebene ausblenden.

0
Qwerty