css - 将复选框的输入样式重置为 IE 中的默认值

Question

我有这样的输入 CSS 规则:

input {
    border: 1px solid black;
}

问题是 IE 中的复选框(已在 IE 8 和 9 上测试过)和 Opera 也继承了这个边框，而不是显示默认样式，它们显示了带有白色背景和黑色复选框的自定义模式，如下所示:

而不是像在 Windows 7 中使用 Chrome 和 Firefox 中显示的渐变灰色背景和深蓝色检查的原生样式:

我想在 CSS 中保留输入规则的边框，但我有一个名为“checkbox”的类，我将它放在所有复选框上，如下所示:

<input type="checkbox" class="checkbox" />

有什么方法可以用 .checkbox 规则重置边框样式吗？

我试过:

.checkbox {
    border: none;
}

在 Opera 中可以恢复默认样式，但在 IE 中不行。我还尝试了许多不同的组合:

.checkbox {
    border: 1 none transparent;
}

但这些似乎都没有重置为 IE 中复选框的默认样式。

是否可以在不移除输入规则边框的情况下恢复 IE 中复选框的默认样式，而是使用 .checkbox 类？

Answer 1

在许多浏览器中，无法将复选框重置为默认的 native 样式。

这可能就是为什么 CSS 重置通常不包含这种效果的规则的原因:

input {
    border: 0;
}

最兼容的技术是这样做:

input[type="text"], input[type="password"] {
    border: 1px solid black;
}

并明确列出您希望设置样式的输入的每个类型。

参见:http://jsfiddle.net/EPpJ9/

这将适用于 IE7+ 和所有现代浏览器。

您也可以使用 not() CSS3 伪类更巧妙地完成此操作，但这在 IE8 中不起作用，这对我来说是一个交易破坏者:

input:not([type="checkbox"]) {
    border: 1px solid black;
}