如何使用CSS设置复选框的样式

更新：

下面的答案参考了CSS 3普及之前的情况。在现代浏览器（包括InternetExplorer9和更高版本）中，使用首选样式创建复选框替换更加简单，无需使用JavaScript

以下是一些有用的链接：

• 仅使用CSS创建自定义表单复选框
• 简易CSS复选框生成器
• 你可以用Checkbox Hack做的事情
• 使用CSS3实现自定义复选框和单选按钮
• 如何使用CSS设置复选框的样式

值得注意的是，根本问题没有改变。您仍然无法将样式（边框等）直接应用于checkbox元素，并使这些样式影响HTML复选框的显示。然而，改变的是，现在可以隐藏实际的复选框，并用自己的样式化元素替换它，只使用CSS。特别是，由于CSS现在有一个广泛支持的：checked选择器，因此您可以使替换项正确反映复选框的选中状态

老答案

下面是一篇关于设置复选框样式的有用文章。基本上，作者发现不同浏览器的默认复选框差别很大，而且无论您如何设置，许多浏览器总是显示默认复选框。所以这真的不是一个简单的方法

不难想象有一种变通方法，可以使用JavaScript在复选框上覆盖一个图像，然后单击该图像即可选中真正的复选框。没有JavaScript的用户将看到默认复选框

编辑添加：这里有一个很好的脚本，可以为您实现这一点；它隐藏了真正的checkbox元素，将其替换为样式化的范围，并重定向单击事件