使用 CSS 自定义单选框和复选框答案

【问题标题】：Custom Radio and Checkbox using CSS使用 CSS 自定义单选框和复选框
【发布时间】：2011-09-18 15:12:28
【问题描述】：

有没有办法使用自定义图像来设置单选按钮和复选框的样式。只使用 CSS 吗？

有人能告诉我怎么做吗？

还有哪些是 jquery 最好的插件？

【问题讨论】：

阅读这个：ryanfait.com/resources/custom-checkboxes-and-radio-buttons 它应该让你开始。

标签： jquery css forms checkbox radio-button

【解决方案1】：

查看CSS - Styling Checkboxes, Radio buttons & dropdowns

【讨论】：

【解决方案2】：

jQuery UI 有一些出色且易于实现的选项：

http://jqueryui.com/demos/button/#checkbox

【讨论】：

【解决方案3】：

你可以用纯 css3 来做，使用伪类:checked。受此article 的启发，我得到了以下解决方案：

特点：

只有 CSS
不需要id 属性
不需要 z-index

在 jsfiddle 上试用：http://jsfiddle.net/tlindig/n6by8/6/

HTML：

<label>
    <input type="radio" name="rg"/><i></i>
    option 1
</label>
<label>
    <input type="radio" checked name="rg"/><i></i>
    option 2
</label>
<label>
    <input type="radio" name="rg"/><i></i>
    option 3
</label>

CSS：

input[type="radio"] {
    display:none;
}
input[type="radio"] + i:before {
    content:'\2718';
    color:red;
}
input[type="radio"]:checked + i:before {
    content:'\2713';
    color:green;
}

一些解释：

元素i需要添加以图标为内容的伪元素:before。 input 元素是空标签，不能有 :before 和 :after 这样的伪元素，所以我们需要一个额外的元素。您也可以使用span 或div，但i 更短。

需要label 才能触发input。如果用label 元素包装input，则不需要id 和for 属性进行关联。

'\2718' 和 '\2713' 是 "ballot X" 和 "check mark" 的 UTF8 字符代码。

除了content，您还可以设置background-image 或任何您喜欢的。

它适用于所有现代浏览器和 ie9+。

【讨论】：

【解决方案4】：

不确定你是否能够使用纯 CSS 来做到这一点，但这种方式是使用 javascript 的好方法：

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

【讨论】：

【解决方案5】：

结帐 WTF, forms 来自 Bootstrap 的创建者Mark otto。它有很好的复选框和收音机样式。

【讨论】：