Custom Checkbox and Radio Buttons

Problem: styling default checkboxes and radio buttons.

Solution: hide the default input and style a label.

<label class="custom-checkbox">
<input type="checkbox" />
<span class="checkmark"></span>
</label>

.custom-checkbox input {
  display: none;
}
.custom-checkbox .checkmark {
  width: 20px;
  height: 20px;
  background-color: #eee;
  border-radius: 4px;
}
.custom-checkbox input:checked + .checkmark {
  background-color: #2196F3;
}