checkbox image css html code example

Example 1: custom checkbox with image css

#trigger {
  display: none;
}
.checker {
  background-image: url(assets/checkboxes.png);
  background-position: left center;
  background-size: auto 100%;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
}
#trigger:checked + .checker {
  background-position: right center;
}

Example 2: custom checkbox with image css

<div>Check me!</div>
<input id="trigger" type="checkbox">
<label for="trigger" class="checker"></label>