自定义复选框

Question

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

Answer 1

实际上有一个CSS技巧可以隐藏复选框（或收音机），定义一个标签（在所有相关浏览器中将打开/关闭复选框），这将是可视化表示，并使用{{1 }和:checked选择器。

这只是一个简单的例子：

+

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

jsFiddle Demo

下行： <div class="foscheck"> <input type="checkbox" id="fos1" /> <label for="fos1"></label> </div>选择器，不幸的是does not work on IE，仅来自IE9。您可以通过条件注释仅为IE应用Javascript回退。

注意：对于辅助功能，您应该在:checked中有一些描述复选框的文字，我只是想说明效果。

Answer 2

jQuery是你最好的选择，this is a checkbox plugin for example，但是有数百个，所以其他东西可能更适合你。只需谷歌“jquery custom checkbox”。