如何创建自定义复选框？

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 演示

注意： 为了便于访问，您应该在

label

中添加一些描述复选框的文本。我只是想说明一下效果。

Answer 2

jQuery 是你最好的选择，这是一个复选框插件，但有数百个，所以其他东西可能更适合你。只需谷歌“jquery 自定义复选框”即可。