How to create the google material design checkbox

After reading the Google Material Design Guideline I would like to recreate the featured checkbox for one of our future applications. Here is how it should look like:

Sure there might be frameworks out there, solving this problem already, but we want to solve it on our own! First off, 2 criteria concerning the Solution:

1. It should be a pure CSS + HTML Solution, using no Javascript
2. It must look exactly as in the design guideline(beside from colors)

The Solution

After thinking a couple of minutes about the main problem, I came up with this:

• labels can be used to trigger events on the element they are used for
• CSS pseudo selector :checked provides a way to ask for the diffrent state-information neded.

What was left unsolved is to draw the current state of the checkbox. Therefore I tend to use borders & absolute position combined with a fixed width & height created box.

The 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>

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

Screenshot of the Outcome & Fiddle for anybody interested.

Example for usage of this peace of Code within a todolist:

Let me know what you think about this solution and feel free to provide any feedback.

---

If you have any questions or did not understand something, please let me know and comment down below. I will try to answer your questions as soon as possible!

Anyway thanks for reading, have a nice day!