自定义复选框 [英] Custom Checkbox

问题描述

您好，我想为我的网站创建一个自定义复选框，如提供的图像链接。什么是最好的方法去做这个？
非常感谢。

Hello i am trying to create a custom checkbox for my website like the image link provided. What would be the best way to go around doing this? Many thanks.

推荐答案

有一个CSS技巧实际上是通过隐藏复选框（或收音机），定义一个标签浏览器将打开/关闭复选框），这将是可视化表示，并使用：checked 和 + 选择器。

There is a CSS trick that actually works by hiding the checkbox (or radio), defining a label (which in all relevant browsers will turn the checkbox on/off) that will be the visual representation, and using the :checked and + selectors.

这只是一个简单的例子：

This is just a simple example:

HTML

HTML

<div class="foscheck">
    <input type="checkbox" id="fos1" />
    <label for="fos1"></label>
</div>

CSS

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

jsFiddle Demo

缺点： ：checked 不能在IE上使用，只能从IE9。

Downsides: the :checked selector unfortunately does not work on IE, only from IE9. You can apply a Javascript fallback only for IE through conditional comments though.

注意：对于辅助功能，您应该有一些文本描述复选框标签，我只是想说明效果。

Note: For accessibility, you should have some text describing the checkbox in the label, I just wanted to illustrate the effect.

这篇关于自定义复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！