<p>
	<label for="check0">
	  <input type="checkbox" id="check0">通常のチェックボックス
	</label>
</p>
<p>
	<label class="check-box" for="check01">
	  <input type="checkbox" id="check01"><span class="text">たけのこの里</span>
	</label>
</p>
<p>
	<label class="check-box" for="check02">
	  <input type="checkbox" id="check02"><span class="text">きのこの山</span>
	</label>
</p>
<p>
	<label class="check-box" for="check03">
	  <input type="checkbox" id="check03"><span class="text">つくしの星</span>
	</label>
</p>
.check-box {
  cursor: pointer;
}

.check-box input {
  display: none;
}

.check-box input + .text:before {
  content: "";
  display: inline-block;
  position: relative;
  top: 0.25em;
  margin: 0 5px 0 0;
  background-image: none, url("https://s-cross.net/wp-content/uploads/2020/01/checkbox-box.png");
  background-size: 68% auto, 100%;
  background-position: top 55% left 50%, 0 0;
  background-repeat: no-repeat, no-repeat;
  width: 19px;
  height: 18px;
}

.check-box input:checked + .text:before {
  background-image: url("https://s-cross.net/wp-content/uploads/2020/01/checkbox-check.png"), url("https://s-cross.net/wp-content/uploads/2020/01/checkbox-box.png");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.