javascript - 如何创建复选框图像库

Question

我想创建某种完全基于图像的复选框。这意味着当我单击该图像时，边框颜色会变为某种颜色:让我们说蓝色并保持蓝色直到下一次单击取消它。问题是我不知道从哪里开始，我创建了一些带有绿色标记的复选框基本图像，但我没有成功将它们转换为我想要的请求。这是我需要得到的最终结果:

图像托管在以下链接中的 tinypic 上: http://i68.tinypic.com/b5496s.jpg http://i67.tinypic.com/2vdk07r.png

到目前为止，这是我的代码，完全不在正确的方向上:

input[type="checkbox"]:not(old){
  width: 28px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

input[type="checkbox"]:not(old)+label{
  display: inline-block;
  margin-left: -28px;
  padding-left: 28px;
  line-height: 24px;
  background: url(http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/checks.png) no-repeat 0 0;
}

input[type="checkbox"]:not(old):checked + label{
   background-position : 0 -24px;
}

<div class="checkbox">
  <input id="chk1" type="checkbox" name="animal" value="dog"/>
  <label id="lbl1" >Dog</label>
  <br>
  <input id="chk2" type="checkbox" name="animal" value="cat"/>
  <label id="lbl2" >Cat</label>
  <br>
  <input id="chk3" type="checkbox" name="animal" value="horse"/>
  <label id="lbl3" >Horse</label>
</div>

Answer 1

使用这个 HTML:

<label>
  <input type="checkbox" /><img src="//placehold.it/100x100" />
</label>

您可以隐藏复选框并根据 :checked 伪类和相邻的兄弟选择器设置 img 的样式，例如:

/* hiding the checkbox */
input[type="checkbox"] {
  position:absolute;
  opacity:0;
}
/* unchecked state - black border */
input[type="checkbox"] + img {
  border:2px solid #000;
  border-radius:6px;
}
/* checked state - blue border */
input[type="checkbox"]:checked + img {
  border-color:#4df;
}

演示:https://jsfiddle.net/7zrpr5fd/