将复选框的输入样式重置为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

在许多浏览器中,无法将复选框重置为默认本机样式.

这可能是CSS重置通常不包含此效果规则的原因:

input {
    border: 0;
}

最兼容的技术是这样做:

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

并明确列出所有type的input你想要的风格.

请参阅:http://jsfiddle.net/EPpJ9/

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

您也可以使用not()CSS3伪类更加巧妙地做到这一点,但这在IE8中不起作用,IE8对我来说是一个交易破坏者:

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