How to create the google material design checkbox
webdesign·@snackaholic·
0.000 HBDHow to create the google material design checkbox
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:  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.  <h4>Example for usage of this peace of Code within a todolist:</h4>  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!