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

Question

我正在尝试使用以下样式设置复选框的样式:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

但是没有应用样式。该复选框仍显示其默认样式。如何赋予它指定的样式？

Answer 1

更新:

下面的答案引用了 CSS 3 广泛可用之前的状态。在现代浏览器(包括 Internet Explorer 9 及更高版本)中，使用您喜欢的样式创建复选框替换更直接，而无需使用 JavaScript。

这里有一些有用的链接:

• Creating Custom Form Checkboxes with Just CSS
• Easy CSS Checkbox Generator
• Stuff You Can Do With The Checkbox Hack
• Implementing Custom Checkboxes and Radio Buttons with CSS3
• How to Style a Checkbox With CSS

值得注意的是，基本问题没有改变。您仍然不能将样式(边框等)直接应用到复选框元素并让这些样式影响 HTML 复选框的显示。然而，改变的是现在可以隐藏实际的复选框并将其替换为您自己的样式元素，仅使用 CSS。特别是，由于 CSS 现在具有广泛支持的 :checked 选择器，您可以使您的替换正确反射(reflect)框的选中状态。

---

旧答案

这是 a useful article about styling checkboxes 。基本上，该作者发现它在不同浏览器之间存在巨大差异，并且无论您如何设计它，许多浏览器总是显示默认复选框。所以确实没有简单的方法。

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

编辑添加:这里是 a nice script that does this for you ；它隐藏了真正的复选框元素，将其替换为样式化的 span，并重定向了点击事件。