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

Question

如何使用CSS设置复选框的样式？我正在尝试使用以下方式设置复选框的样式：<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />但风格并未适用。该复选框仍显示其默认样式。我如何给它指定的样式？

Answer 1

更新：以下答案在CSS3广泛可用之前引用了事物的状态。在现代浏览器（包括Internet Explorer 9及更高版本）中，使用首选样式创建复选框替换更简单，而不使用javascript。

以下是一些有用的链接：

• 使用Just CSS创建自定义表单复选框

• 简单的CSS复选框生成器

• 你可以用复选框黑客做的东西

• 使用CSS3实现自定义复选框和单选按钮

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

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

---

老答复

这是一篇关于样式复选框的有用文章。基本上，作者发现它在浏览器与浏览器之间存在巨大差异，并且无论您如何设置样式，许多浏览器始终显示默认复选框。所以真的没有一个简单的方法。

不难想象一个解决方法，你可以使用javascript在复选框上叠加图像，并点击该图像会导致检查真正的复选框。没有javascript的用户会看到默认复选框。

编辑添加：这是一个很好的脚本，为你做这个 ; 它隐藏了真正的复选框元素，用样式化的span替换它，并重定向click事件。