CSS Checkbox

Styling a checkbox

by Tiago Sousa

HTML

<div class="mp-checkbox">
  <input type="checkbox" class="mp-checkbox">
  <label></label>
</div>

CSS

.mp-checkbox {
  width: 50px;
  height; 50px;
}

.mp-checkbox > input[type="checkbox"] {
  visibility: hidden;
  width: 50px;
  height: 50px;
}

.mp-checkbox label {
  position: relative;
}

.mp-checkbox label:after {
  content : "";
  position: absolute;
  width: 50px;
  width: 50px;
  background: #FFF;
}