<form>
  <p><input type="checkbox" id="checkbox" class="check" /><label for="checkbox">Checkbox</label></p>
  <p><input type="radio" id="radio" class="check" /><label for="radio">Radio</label></p>
  <p><input type="reset" /></p>
</form>

.check {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  position: fixed;
  top: 0;
}
.check + label {
  display: inline-block;
}
.check + label:before {
  border: solid;
  box-sizing: border-box;
  content: "";
  display: inline-block;
  margin: 0 0.166666em;
  opacity: 0.25;
  position: relative;
  right: -0.166666em;
  left: -0.166666em;
  vertical-align: middle;
  width: 1em;
  height: 1em;
}
.check[type="checkbox"] + label:before {
  border-width: 0 0.25em 0.125em 0;
  transform: translate(0, -0.125em) rotate(45deg) scale(0.5, 1);
}
.check[type="radio"] + label:before {
  border-width: 0.125em;
  border-radius: 50%;
}
.check:enabled + label {
  cursor: pointer;
}
.check:enabled + label:hover:before,
.check:enabled:focus + label:before {
  opacity: 0.5;
}
.check:checked + label:before {
  opacity: 0.75;
}
.check:checked:enabled + label:hover:before,
.check:checked:enabled:focus + label:before {
  opacity: 1;
}
.check:disabled + label {
  opacity: 0.5;
}