Material Design Checkbox

Material Design Checkbox

by NickU

HTML

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

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

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