Wie kann ich Beschriftungen basierend auf dem Kontrollkästchenstatus nur mit CSS gestalten?

Styling von Beschriftungen basierend auf dem Kontrollkästchenstatus ohne JavaScript

Viele Szenarien in der Webentwicklung beinhalten die Anzeige von Informationen basierend auf Benutzereingaben. Ein häufiges Beispiel ist das Umschalten der Darstellung einer Beschriftung, wenn das entsprechende Kontrollkästchen aktiviert oder deaktiviert ist. Während JavaScript eine einfache Möglichkeit bietet, dies zu erreichen, untersucht dieser Artikel eine reine CSS-Lösung.

Der Adjacent Sibling Combinator

Der Schlüssel zu dieser Technik liegt im Adjacent Sibling Combinator ( ). Mit diesem Selektor können Sie auf Elemente abzielen, die an ein anderes Element im logischen DOM-Baum angrenzen und diesem vorangehen. In unserem Fall möchten wir auf das Etikettenelement abzielen, das unmittelbar nach dem Kontrollkästchen steht.

Betrachten Sie die folgende HTML-Struktur:

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

Styling des Etiketts

Jetzt Mithilfe des angrenzenden Geschwisterkombinators können wir CSS-Regeln schreiben, die nur dann auf das Beschriftungselement abzielen, wenn das vorhergehende Kontrollkästchen aktiviert ist geprüft:

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

Diese Regel besagt, dass jedes Element mit der Klasse „check-with-label“, das sich in einem geprüften Zustand befindet, sein benachbartes Geschwisterelement mit der Klasse „label-for-check“ formatiert hat mit fetter Schriftstärke.

Beispiel:

Das Anwenden dieser CSS-Regeln auf das angegebene HTML-Beispiel führt zu etwas wie Dies:

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

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

Ausgabe:

My Label (bold)

In diesem Fall wird „Mein Etikett“ fett angezeigt, da das vorherige Kontrollkästchen aktiviert ist , was darauf hinweist, dass diese reine CSS-Technik das Erscheinungsbild des Etiketts basierend auf dem Kontrollkästchenstatus erfolgreich ändert.

Das obige ist der detaillierte Inhalt vonWie kann ich Beschriftungen basierend auf dem Kontrollkästchenstatus nur mit CSS gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!