css 自订复选框

Posted 2021-05-13

<label class="custom-checkbox">
  <input class="custom-checkbox__checkbox" type="checkbox">
  <span class="custom-checkbox__icon"></span>
  <span class="custom-checkbox__label">Select this</span>
</label>

.custom-checkbox__checkbox {
  position: absolute;
  clip: rect(1px,1px,1px,1px);
}


.custom-checkbox__checkbox:checked + .custom-checkbox__icon {
  background: green;
}


.custom-checkbox__icon {
  position: relative;
  top: -2px;

  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;

  background: gray;
}