Kann CSS allein eine Beschriftung basierend auf dem Status des zugehörigen Kontrollkästchens formatieren?

Ändern des Erscheinungsbilds eines Etiketts basierend auf dem Status des Kontrollkästchens ohne JavaScript

Kann CSS genutzt werden, um das Erscheinungsbild eines Etiketts basierend auf dem Status zu steuern – aktiviert? oder ungeprüft - der damit verbundenen Kontrollkästchen?

Ansatz:

Um diese Änderung ohne JavaScript zu erreichen, kann der benachbarte Geschwisterkombinator von CSS verwendet werden. Durch die Definition einer CSS-Regel, die auf das Beschriftungselement neben einem aktivierten Kontrollkästchenelement abzielt, können bestimmte Stiländerungen angewendet werden, wenn sich das Kontrollkästchen im aktivierten Zustand befindet.

Code-Illustration:

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

In diesem Codeausschnitt zielt die CSS-Regel auf jedes Eingabeelement mit dem Klassennamen „check-with-label“ im geprüften Zustand ab. Der benachbarte Geschwisterkombinator „ “ wird verwendet, um das Label mit dem Klassennamen „Label-for-Check“ auszuwählen, das auf das aktivierte Kontrollkästchen folgt.

Wenn das Kontrollkästchen „Check-with-Label“ aktiviert ist, wird die Bei „label-for-check“ wird die angegebene Stiländerung angewendet, in diesem Fall wird die Schriftstärke fetter.

Beispiel Markup:

<div>
  <input type="checkbox" class="check-with-label">

Fazit:

Die Verwendung des angrenzenden Geschwisterkombinators in CSS bietet eine konsistente Methode zum Ändern des Erscheinungsbilds einer Beschriftung je nach Status des zugehörigen Kontrollkästchenelements, sodass in diesem speziellen Szenario kein JavaScript erforderlich ist.

Das obige ist der detaillierte Inhalt vonKann CSS allein eine Beschriftung basierend auf dem Status des zugehörigen Kontrollkästchens formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!