CSS: Checkbox styling

css checkbox styling

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.

[type="checkbox"] + label {
  position: absolute;
}
[type="checkbox"] {
  position: relative;
  left: 15px;
  top: -4px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label::before {
  width: 15px;
  height: 15px;
  background-color: #000;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  z-index: 5;
  position: relative;
}

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.

[type="checkbox"] {
  position: relative;
  left: 15px;
  top: -4px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label {
  position: absolute;
}
[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;
  z-index: 5;
  position: relative;
}
[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.

[type="checkbox"] + label {
  position: absolute;
}
[type="checkbox"] {
  position: relative;
  left: 15px;
  top: -4px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label::before {
  width: 22px;
  height: 18px;
  background-image: url("unchecked.png");
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  z-index: 5;
  position: relative;
}
[type="checkbox"]:checked+label::before {
  background-image: url("checked.png");
}

Checkbox wie ein Switch

[type="checkbox"] {
  position: relative;
  left: 30px;
  top: 0px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label {
  position: relative;
  display: block;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 24px;
  line-height: 1.3;
  padding-left:70px;
  position: relative;
  margin-top: -30px;
}
[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;
  z-index: 5;
  position: absolute;
  left: 0px;
}
[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;
  z-index: 10;
}
[type="checkbox"]:checked + label:before {
  background-color: #2b8718;
}
[type="checkbox"]:checked + label:after {
  margin: 0 0 0 30px;
}

CSS Tutorial

Voriger Schritt: CSS mehrere Transition versetzt starten

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS Übungsaufgaben [Animation & Verlauf]

Kommentare

17 Antworten zu „CSS: Checkbox styling“

  1. Avatar von Peter

    Danke! Sehr gut erklärt und dargestellt!

  2. Avatar von alex
    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

  3. Avatar von Marc Borkowski
    Marc Borkowski

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

    Danke für den Hinweis.

  4. Avatar von GriduSP
    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 ?

  5. Avatar von Marc Borkowski
    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

  6. Avatar von Florian
    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

  7. Avatar von Marc Borkowski
    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ß

  8. Avatar von 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

  9. Avatar von Anonymous
    Anonymous

    Gutes Tutorial, vielen Dank!!

  10. Avatar von Dominik Spreuer
    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

  11. Avatar von Die Webseiten Macher
    Die Webseiten Macher

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

  12. Avatar von 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 ?

  13. Avatar von Lothi
    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ß

  14. Avatar von Marc Borkowski
    Marc Borkowski

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

    Gruß Marc

  15. Avatar von Lothi
    Lothi

    Großartig! Danke dafür.

  16. Avatar von David
    David

    Wenn man ein mehrzeiliges Label eingibt, was gerade auf Mobilgeräten schnell mal passieren kann, ist das Styling vom Toggle irgendwie kaputt. Die Breite scheint ignoriert zu werden.
    Hat dafür jemand eine Lösung?

  17. Avatar von Marc Borkowski
    Marc Borkowski

    Hey @David,
    habe das Problem gelöst und den Code überarbeitet.
    Gruß

Schreibe einen Kommentar

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