自定义复选框

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

缺点::checked遗憾的是,选择器不适用于IE,仅适用于IE9.您可以通过条件注释仅为IE应用Javascript后备.

注意:对于辅助功能,您应该有一些描述复选框的文本label,我只想说明效果.