CSS Tutorial: Wie man die google material design checkbox baut

Die Problemstellung:

Nachdem ich die Google Material Design Guidelines gelesen hatte, hab ich mich dazu entschlossen, die dort erwähnte Checkbox für eine unserer zukünftigen Anwendungen umzusetzen.

Kurz vorab noch ein Bild, damit ihr euch unter der Checkbox was vorstellen könnt:

Sicher mag es im Internet bereits Lösungen zu diesen Problem geben, jedoch sind diese nicht immer zufriedenstellend und meiner Meinung nach zu viel des guten. Ich erwarte folgendes von einer guten Lösung bezüglich dieser Problematik:

Es sollte ausschließlich CSS + HTML verwendet werden (kein Javascript)
Es muss genau so aussehen wie dort beschrieben ( abgesehen von verwendeten Farben )

Der Lösungsansatz:

Nachdem ich etwas nachgedacht hatte, kam mir folgende Idee:
Man könnte das Standard HTML Element Checkbox ausblenden und mit Hilfe des Labels und einem :after Element nachbauen.

Bekanntlich können Labels ja dazu verwendet werden, für das jeweilige Element auf den sie über das for Attribut gebunden werden, Events auslösen. In diesem Falle das ändern des Statuses checked der Checkbox.

Dank des CSS pseudo selectors :checked habe ich zudem noch einen praktischen Weg gefunden, auf den jeweiligen Status der Checkbox zuzugreifen.

Die Lösung:

Das HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div>
  <input type="checkbox" id="customCheckbox"/>
  <label  for="customCheckbox">Hello, I´m your Material Design Checkbox Clone!</label>
</div>

<div style="margin-top:20px;">
  <input type="checkbox" id="customCheckbox2" checked="checked"/>
  <label  for="customCheckbox2">Hello, I´m checked</label>
</div>

Das CSS

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

label {
  display: inline-block;
  cursor: pointer;
  padding-left: 25px;
  position:relative;
}

input[type=checkbox] + label:after {
    font-family: 'Material Icons';
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    border: 2px solid #757575;
    border-radius: 2px;
}

input[type=checkbox]:checked + label:after {
    content: "\E5CA";
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 16px;
    background: #ff5d02;
    border-color: #ff5d02;
}

Ein Screenshot der Lösung und ein Fiddle findet ihr hier.

Beispielsweise Verwendung dieses Codes innerhalb einer Todo-list:

Falls ihr irgendwelche Fragen habt oder etwas nicht verstanden habt, last es mich bitte in den Kommentaren wissen! Ich werde so schnell wie möglich drauf antworten :)

Vielen Dank fürs lesen, habt nen guten Start in die kommende Woche!

English Version of this post