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

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