Checkboxen und Radio-Buttons mit nativen CSS stylen

Eine kurze Erklärung, warum ihr die Checkbox selber stylen solltet:
Es gibt immer wieder Situationen, wo man nicht um das Stylen von Checkboxen herum kommt. Natürlich gibts auch dafür etliche fertige Frameworks.

Das können zum Beispiel folgende sein:

• Pretty Checkbox
• Semantic UI Checkbox
• Bootstrap Checkbox/Radio Buttons

Alle diese Frameworks haben aber einen Nachteil, die eine eigene Lösung nicht hat:
Es benötigt viele Klassen, viel Code. Oft holt man sich nicht nur einen Style über die fertigen Frameworks in die Webseite, sondern gleich eine ganze Reihe von verschiedenen Lösungen. Das wirkt sich natürlich schnell auf den Pagespeed und andere Faktoren der Seite aus.

Um genau das zu vermeiden lohnt es sich, auch das CSS für Checkboxen und Radio-Buttons ohne Javascript, Jquery und andere Frameworks, und stattdessen selber zu schreiben.

In diesem Artikel zeige ich euch, wie das Stylen von Checkboxen und Radio-Buttons funktioniert.

Dir fällt es auch schwer bei Datei-Uploads richtig mit dem Styling der Formularelemente umzugehen?
Dann solltest du dir einmal den folgenden Artikel anschauen: Checkboxen und Radio-Buttons ohne Javascript stylen

Schritt-für-Schritt-Anleitung

Nun kommen wir zur Anleitung für das Styling der Elemente. Zu beachten ist, dass wir alle Standardelemente deaktivieren und über sogenannte Pseudoelemente arbeiten. Wenn das getan ist, können wir fast alles machen und stylen wie wir lustig sind.

Wichtig ist auch: Da wir mit dem + Selector arbeiten, muss im HTML-Markup immer der Input vor dem Label sein. Das hat aber keine Auswirkungen auf die Optik, da wir das normale Input-Feld nicht zum Stylen verwenden.

1. Deaktivieren der Standardelemente

input[type="checkbox"],input[type="radio"]{
   opacity: 0;
   pointer-events: none;
   user-select: none;
   position: absolute;
}

Als erstes setzen wir die Standard-Inputs auf opacity: 0; pointer-events: none; , da wir diese nur für die Statusabfrage brauchen. Die Labels bei Checkboxen und Radio-Buttons können ebenfalls angeklickt werden, sofern diese ein for="" Attribut haben, dessen Wert der Id vom Input entspricht.

Wichtig nicht display: none; verwenden wenn das Feld Required, ist da sonst die Standard Meldung der Browser nicht Ausgegben werden kann.

 <input type="checkbox" name="Einverstanden"  id="Einverstanden" value="ok">
 <label for="Einverstanden">Ich bin damit einverstanden</label>

2. Die Box erstellen und stylen

Nun starten wir mit dem Styling für unsere Checkbox und die Radio-Buttons. Dabei ist es wichtig, dass dieses das Label "position: relative;" bekommt, damit wir in unserem Pseudoelement :after die "position: absolute;" verwenden können. So können wir unsere Box in Abhängigkeit von unserem Label positionieren. Anschließend definieren wir feste Breiten und Höhen und positionieren unsere Box noch korrekt an unserem Label. Mit der rgba Color-Auswahl können wir zusätzlich eine transparente Farbe für die Border definieren.

Zu beachten ist hier, dass bei Pseudoelementen wie dem :before und :after immer das Attribut content angegeben werden muss, da diese sonst nicht dargestellt wird. Will man keinen spezifischen Wert zuweisen, kann man einfach einen leeren String zuweisen. Das sieht dann folgendermaßen aus: "content: ' ';".

Nun müssen wir nur noch einen Border-Radius abweichend für die Radio-Buttons definieren, da diese rund dargestellt werden sollen.

label{
  position: relative;
  user-select: none;
  margin: 10px;
}

label:after{
  content: '';
  display: block;
  border: 1px solid rgba(0,0,0,0.4);
  width: 10px;
  height: 10px;
  position: absolute;
  right: -25px;
  top: 2px;
  cursor: pointer;
}

Nun müssen wir nur noch einen Border Radius abweichend definieren für die Radio Buttons da diese rund dargestellt werden sollen.

input[type="radio"] + label:after{
  border-radius: 20px;
  
  /* Für die Korrekte Positionierung änderen wir noch die Position von Rechts Ausgehend. */
  right: -20px;
}

3. Den checked Selector verwenden, um die aktivierte Checkbox anzuzeigen

Nun benötigen wir den + Selector und die Pseudo-class :checked um den Aktivierungszustand zu erzeugen. Wie oben schon beschrieben, ist es hier nun ganz wichtig, dass das Input vor dem Label ist, sonst wird das Checkbox-Styling nicht funktionieren.

input[type="checkbox"]:checked + label:after{
  background: red;
  /* Die Aktivierte Checkbox wird Rot */
}

input[type="radio"]:checked + label:after{
  background: green;
  /* Der Aktivierte Radio Button wird Grün */
}

Live Beispiel für das Stylen

Hier hab ich nochmal alles für euch in einem verständlichen Beispiel zusammengeführt, was ihr auch gerne als eure Basis verwenden könnt. Dort können wir natürlich noch deutlich aufwändigere Slide-Effekte und andere Spezialitäten inkludieren.

Nun könnt ihr eurer Kreativität freien Lauf lassen und euer after frei stylen! Das ist der große Vorteil eines after/before gegenüber den Standard-Checkboxen, die, je nach Browser, nur schwer bis gar nicht zu stylen sind. Und dafür braucht ihr nun auch keine Framework mehr, was die Ladezeit eurer Seite nur unnötig verlangsamt.