html - 如何用图像制作复选框

Question

我的网站上有默认复选框，每个复选框上只有文本(例如 example)。

是否可以将复选框设计为在其上显示图像？如果它被选中，也许在复选框上加上“v”标记？

---

我希望它看起来像:

Answer 1

这是使用标签模拟基于图像的复选框的方法

input {
  display: none
}

/*  switch image  */
label[for="chk1"] {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  background: url(http://placehold.it/100/f00);
}
#chk1:checked ~ label[for="chk1"] {
  background: url(http://placehold.it/100/ff0);
}

/*  add content  */
label[for="chk2"] {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  position: relative;
}
#chk2:checked ~ label[for="chk2"]::after {
  content: 'V';
  position: absolute;
  left: 0;
  right: 0;
  font-size: 90px;
  font-weight: bold;
  font-family: arial;
}

<input id="chk1" type="checkbox">
<input id="chk2" type="checkbox">

<label for="chk1"></label>
<label for="chk2"></label>

<div>Click a box to toggle it</div>