javascript - 自定义复选框

Question

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

Answer 1

有一个 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。不过，您可以通过条件注释仅为 IE 应用 Javascript 回退。

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