自定义复选框答案

【问题标题】：Custom Checkbox自定义复选框
【发布时间】：2011-09-23 10:23:34
【问题描述】：

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

【问题讨论】：

标签： javascript html css forms checkbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

有一个 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。不过，您可以通过条件 cmets 仅为 IE 应用 Javascript 后备。

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

【讨论】：

只是想指出 :checked 在 IE 中直到版本 9 才被支持。另外，为什么不添加额外的类而不是 .foscheck input 和 .foscheck label？
@Michael True，我已经将其编辑到我的答案中:)。你对类也是正确的（标签没有类），这是我对input元素的坏习惯:)。
嘿，谢谢你的回答。我已经按照您的解决方案完成了此操作。 js fiddle example 并且想知道我如何让它像我的图像一样显示在彼此旁边的问题上。谢谢。
@HAWKES08 尝试将display: inline-block; 添加到divs。
出于兴趣，您知道在每个文本下方获取文本的最简单方法吗？