My Flat Checkbox

by Nayana Das

HTML

<div class="form-group" id="moduleList4Delete" >
  <p>
    <input class="pureChecker" type="checkbox" id="test1" />
    <label class="pureLabel" for="test1">Red</label>
  </p>
  </div>

CSS

.pureChecker:not(:checked),
.pureChecker:checked {
  position: absolute;
  left: -9999px;
}
.pureChecker:not(:checked) + .pureLabel,
.pureChecker:checked + .pureLabel {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

/* checkbox aspect */
.pureChecker:not(:checked) + .pureLabel:before,
.pureChecker:checked + .pureLabel:before {
  content: '';
  position: absolute;
  left:0; top: 2px;
  width: 17px; height: 17px;
  border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
.pureChecker:not(:checked) + .pureLabel:after,
.pureChecker:checked + .pureLabel:after {
  content: '✔';
  position: absolute;
  top: 3px; left: 4px;
  font-size: 18px;
  line-height: 0.8;
  color: #09ad7e;
  transition: all .2s;
}
/* checked mark aspect changes */
.pureChecker:not(:checked) + .pureLabel:after {
  opacity: 0;
  transform: scale(0);
}
.pureChecker:checked + .pureLabel:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
.pureChecker:disabled:not(:checked) + .pureLabel:before,
.pureChecker:disabled:checked + .pureLabel:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
.pureChecker:disabled:checked + .pureLabel:after {
  color: #999;
}
.pureChecker:disabled + .pureLabel {
  color: #aaa;
}
/* accessibility */
.pureChecker:checked:focus + .pureLabel:before,
.pureChecker:not(:checked):focus + .pureLabel:before {
  border: 1px dotted blue;
}

/* hover style just for information */
.pureLabel:hover:before {
  border: 1px solid #4778d9!important;
}