如何用图像制作复选框

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>

Answer 2

我认为大多数人不会将图像放在他们的复选框中。他们要么使图像像@LGSon 那样的复选框，要么将图像和复选框一起包装在 div 中。像这样的：

function toggleCheck(sibling) {
  var checkBox = sibling.parentNode.getElementsByTagName("input")[0];
  checkBox.checked = !checkBox.checked;
}

.image-box {
  width: 150px;
  text-align: center;
  background: #E9E8E7;
  padding: 10px;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
}
.image-box img {
  max-width: 100%;
  display: block;
  margin-bottom: 7px;
}

<div class="image-box">
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" onClick="toggleCheck(this);" />
  <input id="dogs" type="checkbox" name="dogs" value="Dog">
  <label for="dogs">I like dogs</label>
</div>