Kann ich ein Etikett basierend auf dem Status seines Kontrollkästchens nur mit CSS formatieren?

Styling von Beschriftungen basierend auf dem Kontrollkästchenstatus ohne JavaScript

Frage:

Ist das möglich? Ändern Sie den Stil einer Beschriftung basierend auf dem aktivierten Status des entsprechenden Kontrollkästchens, ohne darauf zurückzugreifen JavaScript?

Antwort:

Ja, es ist möglich, den benachbarten Geschwisterkombinator in CSS zu verwenden.

Erklärung:

Durch die Verwendung des benachbarten Geschwisterkombinators ( ) können Sie auf Elemente abzielen, die unmittelbar auf ein bestimmtes Element folgen. In diesem Fall verwenden wir es, um Beschriftungen (.label-for-check) zu formatieren, die neben aktivierten Kontrollkästchen (.check-with-label:checked) stehen.

Beispiel:

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

<div>
  <input type="checkbox" class="check-with-label"><p>Wenn in diesem Beispiel das Kontrollkästchen mit der ID „idinput“ aktiviert ist, wird die darauf folgende Beschriftung „Mein Label“ fett angezeigt. Dies liegt daran, dass das Label die folgenden Bedingungen erfüllt:</p>
<ul>
<li>Es grenzt aufgrund des Kombinators an ein aktiviertes Kontrollkästchen.</li>
<li>Es stimmt mit dem Klassenselektor .label-for-check überein.</li>
</ul>
</div>

Das obige ist der detaillierte Inhalt vonKann ich ein Etikett basierend auf dem Status seines Kontrollkästchens nur mit CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!