使用CSS的自定义收音机和复选框

Question

是否有一种方法可以使用自定义图像来设置单选按钮和复选框的样式。只使用CSS？

有人能指出我该怎么做吗？

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

Answer 1

检查CSS - Styling Checkboxes, Radio buttons & dropdowns

Answer 2

jQuery UI的有一些优秀的和容易实现的选项：

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

Answer 3

不知道，你就可以用纯CSS来做到这一点，但这种方式是伟大的方式使用javascript：

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

Answer 4

你可以用纯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'是“选票X”和“复选标记”的UTF8字符代码。

而不是content你也可以设置一个background-image或你喜欢什么。

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

Answer 5

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