<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");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.