CSS: Checkbox styling

CSS Checkbox styling teaser
Marc Borkowski
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.

Selektor und ausblenden

Zuerst muss die Standard Checkbox ausgeblendet werden, da diese nicht bearbeitet werden kann.

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

Nach dem benutzen des CSS wird die Checkbox selbst entfernt.


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.

/* selektiert das Label Tag nach jeder Checkbox */
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"] {
  display:none;
}
input[type="checkbox"] + label::before {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  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.

#subscribeNews6[type="checkbox"] {
  display:none;
}
#subscribeNews6[type="checkbox"] + label::before {
  width: 22px;
  height: 18px;
  background-image: url("https://boolie.org/wp-content/uploads/2017/11/unchecked.png");
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
}
#subscribeNews6[type="checkbox"]:checked+label::before {
  background-image: url("https://boolie.org/wp-content/uploads/2017/11/checked.png");
}

Checkbox wie ein Switch

input[type="checkbox"] {
  display:none;
}
input[type="checkbox"] + label {
  width: 60px;
  height: 30px;
  border-radius: 30px;
  border: 2px solid #ddd;
  background-color: #EEE;
  display: inline-block;
  content: "";
  float: left;
  margin-right: 5px;
  transition: background-color 0.5s linear;
  margin-top: 15px;
}
input[type="checkbox"] + label:hover {
  cursor: pointer;
}
input[type="checkbox"] + label::before {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #fff;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
}
input[type="checkbox"]:checked+label{
  background-color: #2b8718;
}
input[type="checkbox"]:checked+label::before {
  margin: 0 0 0 30px;
}

Label Inhalt hinzufügen

input[type="checkbox"] + label {
  position: relative;
}
input[type="checkbox"] + label::after {
    content: "Testlabel";
    position: absolute;
    left: 70px;
    top: 5px;
}

Michael Zimmermann hat die Checkbox optimiert, ihr könnt seinen Code unter https://codepen.io/crookoo/pen/YzyWyaM benutzen. Werde demnächst den Artikel mit dem Code updaten.

Schreibe einen Kommentar

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

Kommentare
    31.10.2019

    Danke! Sehr gut erklärt und dargestellt!

    alex
    21.11.2019

    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
    21.11.2019

    Hey @Alex, werde mein Artikel bearbeiten und auf den neusten Stand bringen. Danke für den Hinweis.

    GriduSP
    07.02.2020

    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
    09.02.2020

    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
    27.02.2020

    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
    28.02.2020

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

    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. https://codepen.io/crookoo/pen/YzyWyaM

    Anonymous
    06.05.2020

    Gutes Tutorial, vielen Dank!!

    Dominik Spreuer
    11.06.2020

    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
    25.07.2020

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