html - 选择复选框输入时在图像上显示复选标记的最简单方法？

Question

我已使复选框输入不可见并将其放在图像上，以便我可以像使用复选框一样使用图像，但是，现在我需要以某种方式指示何时选择和取消选择图像。这就是为什么我试图在选中时在图像上添加一个复选标记，如果取消选中则将其删除。遗憾的是，我不确定最好的方法是什么。

我应该在所选图像上显示另一幅图像吗？我是否应该使用纯 CSS 制作复选标记，这样我就不必使用图像。我将如何着手实现变更？

.categories-wrapper {
    position: relative;
}
.category-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

<div class="categories-wrapper">
    <img src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png' alt='Random image' />
    <input class='category-input' type="checkbox" name="categories[]" value="">
    <input type="hidden" name="categoryFiles[]" value="">
</div>

Answer 1

只需在复选框旁边添加一个标签，并使用 id-for 映射将其映射到复选框。在 css 中，只要使用 :checked 选择器选中复选框，我们就会将样式赋予标签。你可以把你的形象放在标签里。

.categories-wrapper {
    position: relative;
}
.category-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}
.category-input:checked + label{
background:red; /* put your image here*/
 height: 50px;
  width: 50px;
  position: absolute;
 top:0;
 left:0;
}

<div class="categories-wrapper">
    <img src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png' alt='Random image' />
    <input class='category-input' type="checkbox" id='checker' name="categories[]" value="">
    <label for="checker"></label>
    <input type="hidden" name="categoryFiles[]" value="">
</div>