CSS: Checkbox styling

Datum
28.12.2018

In diesem Beitrag zeige ich, wie man Checkboxen selektiert und stylen kann. Ich werde die System-Schaltflächen ausblenden und mit CSS selbst gestaltete hinzufügen.

HTML Code

Vorab erstmal den HTML Code für eine Checkbox und das Label

<input id="confirm" type="checkbox" /><label for="confirm">Label content</label>

einfaches Viereck erstellen

Zum einfügen des Vierecks verwende ich das ::before Statement, es fügt vor dem ausgewählten HTML Objekt ein Element hinzu.

input[type="checkbox"] {
  position: absolute;
  left: -15px;
}
input[type="checkbox"] + label::before {
  width: 15px;
  height: 15px;
  background-color: #000;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
}

Statuswechsel anzeigen

Damit für den Benutzer die Änderung sichtbar wird, soll die Farbe auf Rot wechseln, wenn die Checkbox angeklickt wird.

input[type="checkbox"]:checked+label::before {
  background-color: #c72f2f;
}

erweitertes Styling

Mit ein par weiteren CSS Eigenschaften kann man mit CSS sich schöne Buttons erstellen.

input[type="checkbox"] {
  position: absolute;
  left: -15px;
}
input[type="checkbox"]+label::before {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 2px solid #8cad2d;
  background-color: #fff;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
}
input[type="checkbox"]:checked+label::before {
  box-shadow: inset 0px 0px 0px 3px #fff;
  background-color: #8cad2d;
}

checked mit Bildern

Es ist auch möglich ein Bild zu verwenden, das Bild als background-image setzen und schon wird es verwendet.

input[type="checkbox"] {
  position: absolute;
  left: -15px;
}
input[type="checkbox"] + label::before {
  width: 22px;
  height: 18px;
  background-image: url("unchecked.png");
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
}
input[type="checkbox"]:checked+label::before {
  background-image: url("checked.png");
}

Checkbox wie ein Switch

input[type="checkbox"] {
  position: absolute;
  left: -15px;
}

input[type="checkbox"] + label {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 24px;
  line-height: 1.3;
}

input[type="checkbox"] + label:before {
  width: 60px;
  height: 30px;
  border-radius: 30px;
  border: 2px solid #ddd;
  background-color: #EEE;
  content: "";
  margin-right: 15px;
  transition: background-color 0.5s linear;
}

input[type="checkbox"] + label:after {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #fff;
  content: "";
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
  position: absolute;
  left: 2px;
  top: 2px;
}

input[type="checkbox"]:checked + label:before {
  background-color: #2b8718;
}

input[type="checkbox"]:checked + label:after {
  margin: 0 0 0 30px;
}

Danke an Michael Zimmermann, er hat die Switch-Checkbox optimiert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentare
Peter

Danke! Sehr gut erklärt und dargestellt!

alex

Hallo,

input[type=“checkbox“] + label {}
„verschwendet“ ja quasi mein label. Wie kann ich dennoch einen Text daneben anzeigen.
Ich hab leider nicht die Möglichkeit einfach ein ein neues Textfeld daneben zu setzen, sondern muss das label verwenden.
Neue Elemente daneben setzen wäre natürlich grundsätzlich möglich aber leider nicht in dem Fall, an dem ich gerade sitze.

Danke schon mal

Marc Borkowski

Hey @Alex,
werde mein Artikel bearbeiten und auf den neusten Stand bringen.

Danke für den Hinweis.

GriduSP

Vielen Dank für diese Anleitung!

Mich würde einmal interessieren, ob sich diese Checkboxen auch als einfacher Spam-Schutz eignen könnten.

Mein Gedankengang ist dieser: Die eigentliche Checkbox wird ja ausgeblendet und statt dessen mit dem Label gearbeitet. Könnte das evtl. Robots vom clicken abhalten ?

Marc Borkowski

Hallo GriduSP,
das ist aktuell schon eine verbreitete Methode, aber die wird anders angewandt. Es wird ein unsichtbare Checkbox angezeigt und wenn diese gecheckt ist, ist es höchstwahrscheinlich ein Bot.

Gruß Marc

Florian

hallo zusammen und vielen dank für das css tutorial. ich stecke noch in den anfängen von webdesign, und css ist schon wahnsinn. Dass kann sich auch keine sau merken was da alles mit machbar ist 🙂

nun habe ich ein problem mit deinem code und hoffe du kannst helfen.
Ich hätte gerne das css deiner checkboxen übernommen (am liebsten den switch) und habe den code in mein css geschmissen
nun wird der button auch wie gewünscht angezeigt (checked) aber er lässt sich nicht klicken. Der Zustand ändert sich nicht.
Ich habe hinter jedem input type checkbox ein gesetzt, sodass die box angezeigt wird.

Aufgrund Unternehmensinterna nutze ich den IE 11

Marc Borkowski

Hey Florian, da kann ich dir aus der ferne leider nicht helfen. Schick mir doch dein HTML via Mail an marc@boolie.org. Gruß

Michael Zimmermann

Schaut mal, wie ich den Switch weiterentwickelt habe: Statt das Label für den Schieber zu verwenden, habe ich die Pseudoklasse :after verwendet, so dass der Inhalt des Labels ganz normal im Markup stehen kann.
code

Anonymous

Gutes Tutorial, vielen Dank!!

Dominik Spreuer

Danke für den Artikel! Könntest du das html für input und label hinzufügen. Das hat mir gefehlt und ich musste mit Browserconsole die Elemente anschauen

Die Webseiten Macher

Sehr cool – evtl. wäre eine Anleitung für Contact Form 7 noch super!

Hansjörg

Hallo Marc,
ich möchte dein Script für eine Farbauswahl etwas abändern..
Das heißt, mass ich mehrere Checkboxen in verschiedenen Farben ausgeben lassen möchte.

Allerdings funktioniert mein Idee nicht.
Es werden zwar die Felder farblich dargestellt, aber nicht mit dem Haken aktiviert.
Ich habe versucht, den einzelnen „Label“ einen anderen Namen zu geben. Wie z.B.“ Label_red“.
Das gleich logischer Weise auch für die „Switch’s“

input[type=“checkbox“] + label_red::before {
width: 50px;
height: 50px;
background-color: red;
display: block;
content: „“;
float: left;
margin-right: 5px;
}
Wo liegt der Fehler ?

Lothi

Hi,
leider sind die Checkboxen, da ausgeblendet, nicht mehr mit dem Tastaturfokus erreichbar. Daher schließt diese Methode alle Nutzer aus, die für die Steuerung eine Tastatur verwenden. Das sind z.B. blinde/stark sehbehinderte Menschen, oder Menschen die aufgrund anderer Behinderungen eine Maus nicht gut bedienen können. Das ist zwar eine kleine Benutzergruppe, aber dennoch sollte diese Technik nicht verwendet werden.
Gruß

Marc Borkowski

Hey Lothi,
Ich habe den Artikel überarbeitet. Nun kann man die Checkboxen mit der Tastatur bedienen.

Gruß Marc

Lothi

Großartig! Danke dafür.