After reading the  [Google Material Design Guideline](https://material.io/guidelines/) I would like to recreate the featured checkbox for one of our  future applications. Here is how it should look like:

![gmdcb.png](https://steemitimages.com/DQmWQbvrDTrWYfwxNdaz2cpXSUfvdhLq1SCVzJnuW7ZgYQZ/gmdcb.png)

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)

<h2>The Solution</h2>
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.

<h3>The HTML</h3>
```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>
```

<h3>The CSS</h3>
```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;
}
```
<br>
Screenshot of the Outcome & [Fiddle](https://jsfiddle.net/rrm5htwh/1/) for anybody interested.

![outcome.png](https://steemitimages.com/DQmUBRiaWTqqNw68ftFgH8LD1E7kkKdgm4PsaXU9sUMeSVK/outcome.png)

<h4>Example for usage of this peace of Code within a todolist:</h4>

![example.png](https://steemitimages.com/DQmbh6CYYahy9GbdHd4UtKWJic2rFV2a6Apw9Jm71tVpN1d/example.png)

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!