Checkboxen und Radio-Buttons ohne Javascript stylen
Kategorie:
Veröffentlicht: 21.07.2019
Dein Netzwerk ist offline, deshalb laden wir die gesamte Seite aus dem Cache. Beachte: die Inhalte könnten veraltet sein! Für aktuelle Inhalte aktiviere bitte dein Internet.
Hallo liebe Nutzer,
da wir als Coding-Plattform und Webentwickler ausschließlich auf aktuelle Technologien setzen, unterstützen wir keine veralteten Internetbrowser. Bitte schau dir doch ein paar der tollen Alternativen an, bestimmt findest du hier einen für dich passenden modernen Browser!

Benachrichtigungen

Bleib immer mit aktuellen Informationen auf dem Laufenden, dein Browser informiert dich über neue Artikel und wichtige Hinweise von uns!

Checkboxen und Radio-Buttons mit nativen CSS stylen

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]

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:

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.

Der "+" CSS Selector

Der + Selector in CSS wird nicht oft verwendet, ist aber für das Stylen von Checkboxen und Radio Buttons eine sehr gute Variante. Mit diesem Selector ist es möglich, das direkte nachkommende Element zu stylen.

Zum Beispiel haben wir eine div Container mit der Class "kontaktDaten" vorliegen. Nun haben wir danach ein span mit einem Hinweis für die Kontaktdaten. Also können wir mit "div.kontaktDaten + span" das entsprechende Element selektieren, ohne eine weitere Class zu vergeben oder ein anderes HTML Element drumherum schreiben zu müssen.

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"]{
  display: none;
}

Als erstes setzen wir die Standard-Inputs auf Display 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.

 <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.

input[type="checkbox"],input[type="radio"]{
  display: none;
}

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;
}

input[type="checkbox"]:checked + label:after{
  background: red;
}



input[type="radio"] + label{
  display: block;
  max-width: 140px;
}

input[type="radio"] + label:after{
  border-radius: 20px;
  right: -20px;
}

input[type="radio"]:checked + label:after{
  background: green;
}


form{
  margin: 20px;
}
<form>
  <input type="checkbox" name="Einverstanden"  id="Einverstanden" value="ok">
  <label for="Einverstanden">Ich bin damit einverstanden</label>
</form>

<form>
  <input type="radio" name="Select" id="h" value="Herr">
  <label for="h">Herr</label>
  <input type="radio" name="Select" id="f" value="Frau">
  <label for="f">Frau</label>
  <input type="radio" name="Select" id="d" value="Divers">
  <label for="d">Divers</label>
  
</form>

Live Code inhalte sind oft nicht auf Mobil Geräte Optimiert da diese nur Bestimmte Szenarien auf zeigen soll. Falls die Anzeige auf deinen Mobilgeräte nicht tadellos Funktionieren sollte öffne die Seite bitte auf einem Desktop Geräte.

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.

Home Menü Suche
X