Wie man Checkboxen mit CSS ohne Bibliotheken stylt…

Um eine Kontrollkästchen ohne Bibliotheken zu stylen, kann man eine Kombination aus dem Verstecken des Standardelements und der Gestaltung der Pseudo-Elemente ::before oder ::after verwenden, die mit dem übergeordneten <label> verbunden sind.

Verstecken des Standard-Kontrollkästchens:

input[type="checkbox"] {
  display: none; /* oder visibility: hidden; height: 0; width: 0; */
}

Erstellen eines stilisierten "Quadrats" mit dem Pseudo-Element <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Erforderlich, um das Pseudo-Element anzuzeigen */
  display: inline-block;
  width: 1em; /* Größe des Quadrats */
  height: 1em; /* Größe des Quadrats */
  border: 1px solid #ccc; /* Rand des Quadrats */
  margin-right: 0.5em; /* Abstand zum Text */
  vertical-align: middle; /* Vertikale Ausrichtung */
  /* Weitere optionale Stile: background-color, border-radius, box-shadow */
}

Stil für den markierten Zustand:

Wir verwenden den checked-Selektor für input und ändern die Stile des Pseudo-Elements label entsprechend.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Hintergrundfarbe bei aktiviertem Kontrollkästchen */
  border-color: #007bff; /* Rahmenfarbe bei aktiviertem Kontrollkästchen */
  /* Weitere optionale Stile */
}

Hinzufügen eines "Häkchens" (oder eines anderen Indikators):

Man kann ein zweites Pseudo-Element (::after) verwenden oder das bestehende ::before mit background-image (svg, data-url) oder Border-Stilen gestalten.

Beispiel mit Border zur Erstellung eines Häkchens:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Breite der Häkchenlinie */
  height: 0.7em; /* Höhe der Häkchenlinie */
  border-right: 2px solid white; /* rechte Seite des Häkchens */
  border-bottom: 2px solid white; /* untere Seite des Häkchens */
  transform: rotate(45deg); /* Rotation zur Bildung des Häkchens */
  position: absolute; /* Für die Positionierung innerhalb von ::before */
  top: 0.1em; /* Positionsanpassung */
  left: 0.3em; /* Positionsanpassung */
  /* Das übergeordnete label::before benötigt möglicherweise position: relative; */
}

Damit das letzte Beispiel richtig funktioniert, fügen Sie position: relative; zu input[type="checkbox"] + label::before hinzu:

input[type="checkbox"] + label::before {
  /* ... vorherige Stile ... */
  position: relative; /* Hinzugefügt für die Positionierung von ::after */
}

Dieser Ansatz bietet vollständige Kontrolle über das Aussehen des Kontrollkästchens und eine gute Zugänglichkeit, da das Standard-Element weiterhin existiert und auf Benutzeraktionen (Klick, Fokus) reagiert. Es ist wichtig, input und label mit den Attributen id und for zu verknüpfen, um eine korrekte Funktion beim Klicken auf den Label-Text zu gewährleisten.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Mit den Bedingungen einverstanden</label>

Wie man Checkboxen mit CSS ohne Bibliotheken stylt?