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
• Selektor und ausblenden
• einfaches Viereck erstellen
• Statuswechsel anzeigen
• erweitertes Styling
• checked mit Bildern
• Checkbox wie ein Switch

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

Subscribe to newsletter?

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

Subscribe to newsletter?

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

Subscribe to newsletter?

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

Subscribe to newsletter?

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

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS Tutorial

Voriger Schritt: CSS mehrere Transition versetzt starten

Zur Turtorial-Reihe: CSS Tutorial

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