如何将复选框的真实状态更改为图标?

Question

我正在为一个网站(主题：老式灯(制作登录屏幕，并想要一个复选框。但我认为，如果复选框的真实状态是灯泡的图标，那会很有趣。这可以通过任何或其他方式吗？[1]：https://i.stack.imgur.com/1l1rq.jpg 这是我的表单/复选框代码：

<form>
<input type="text" placeholder="Enter Email">
<input type="password" placeholder="Enter Password">
<input class="customCheckbox" type="checkbox" id="rememberMe">
<label for="rememberMe">Remember Me</label>
</form>

Answer 1

你可以做这样的事情：

<input id="trigger" type="checkbox">
<label for="trigger" class="checker"></label>

#trigger {
display: none;
}
.checker {
background-image: url("https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg");
background-position: left center;
background-size: 100% 100%;
width: 40px;
height: 40px;
background-repeat: no-repeat;
padding: 20px;
}
#trigger:checked + .checker {
background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
}

因此，当用户单击复选框时，背景会发生变化。当然，这只是一个粗略的例子，但我想你明白了。