javascript - 自定义复选框

您好，我正在尝试为我的网站创建一个自定义复选框，例如提供的图像链接。最好的方法是什么？
非常感谢。

最佳答案

有一个CSS技巧可以通过隐藏复选框(或单选框)，定义一个标签(在所有相关浏览器中将打开/关闭该复选框)作为视觉表示并使用:checked和+选择器来实际起作用。

这只是一个简单的示例:

.foscheck input { display: none; }
.foscheck label { display: block; width: 20px; height: 20px; background: red; }
.foscheck input:checked + label { background: blue; }

<div class="foscheck">
  <input type="checkbox" id="fos1" />
  <label for="fos1"></label>
</div>

jsFiddle Demo

缺点:不幸的是，是:checked选择器does not work on IE，仅来自IE9。不过，您可以通过条件注释仅将javascript后备广告应用于IE。

注意:为了便于访问，您应该在label中有一些描述复选框的文字，我只是想说明一下效果。

关于javascript - 自定义复选框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6491962/