Question

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

有人可以指出我该怎么做吗？

其他哪些是jquery最好的插件呢？

Answer 1

检查CSS - Styling Checkboxes, Radio buttons & dropdowns

Answer 2

jQuery UI有一些优秀且易于实现的选项：

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

Answer 3

您可以使用伪类:checked使用纯css3。受此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。如果您使用input元素包装label，则不需要id和for属性进行关联。

'\ 2718'和'\ 2713'是“选票X”和“复选标记”的UTF8字符代码。

您可以设置content或者您喜欢的任何内容，而不是background-image。

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

Answer 4

不确定您是否可以使用纯CSS执行此操作，但这种方式使用javascript很棒：

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

Answer 5

从Bootstrap WTF, forms的创建者处结帐 Mark otto 。它具有良好的复选框和收音机样式。

使用CSS定制收音机和复选框

5 个答案: