Styling von Checkboxen

Das Syling von Checkboxen ist nicht ganz einfach, da sich diese mit hilfe von CSS nur eingeschränkt gestalten lassen.

Standard

Ein wenig CSS

background-color: #00f; border: 3px solid #f00; width: 32px;

Wie man sieht, sieht man nicht viel. Background-Color und Border bewirken garnichts. Nur die width Angabe bewirkt einen Abstand zwischen den Kästchen. Die Größe bleibt unverändert.

Um der Checkbox etwas Styling zu verpassen muss man in die Trickkiste greifen. Zuerst benötigen wir einen Kontainer. Hier das LABEL Element. In diesen Rahmen kommt das INPUT type="checkbox" und noch zusätzlich ein SPAN Element. Das LABEL Element verbindet sich zusätzlich mit der Checkbox, so das  auch der Text klickbar wird und die Checkbox aktiviert bzw. deaktiviert.

<label class="lcbox10">Checkbox 10 
<input class="cbox10" type="checkbox" />
<span class="checkmarke10"></span>
</label>

Nicht sonderlich späktakulär.

Fügen wir nun ein wenig CSS hinzu.

.lcbox10 {
  display: block;
  position: relative;
  padding-left: 32px;
  cursor: pointer;
}

Als erstes haben wir das LABEL zu einem Block Element gemacht und etwas eingerückt um etwas Platz auf der linken Seite zu schaffen. Mit cursor: pointer sieht man gleich das wir dort etwas klicken können.

Als nächstes müssen wir uns um die Checkbox kümmern. Da wir sie mit CSS nicht umgestalten können verstecken wir sie einfach.

.cbox10 {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

Nun kümmern wir uns um das SPAN Element. Da es selber kein Syling besitzt können wir es wunderbar verwenden um es umzugestalten.

.checkmarke10 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

Beim überfahren mit dem Mauszeiger soll sich die Farbe ändern. 

.lcbox10:hover .checkmarke10 {
  background-color: #ccc;
}

Und beim Auswählen der Checkbox soll sich auch die Farbe ändern.

.lcbox input:checked ~ .checkmarke10 {
  background-color: #00f;
}

Zu guter letzt benötigen wir noch einen Indikator der uns die Auswahl anzeigt. Nur eine andere Farbe für die Box ist doch etwas dürftig. Mit dem :after Selector können wir an das SPAN Element etwas anhängen. Diesem Anhängsel können wir ein Styling verpassen. D.h. aus dem SPAN machen wir eine Box. Diese Box bekommt rechts und unten einen Rahmen. Mit transform drehen wir diese Box ein Stück und schon sieht es aus wie ein Häckchen.

.lcbox10 .checkmarke10:after {
  display:none;
  position:absolute;
  content:'';
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
 
.lcbox10 input:checked ~ .checkmarke10:after {
  display: block;
}

#test {
  transform: rotate(45deg);
  border: 10px;
}