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

我有一个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类？

解决方法

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

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

input {
    border: 0;
}

最兼容的技术是这样做：

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

并明确列出您希望设置样式的每种输入.

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

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

你也可以用not()CSS3伪类更整洁地做到这一点,但这在IE8中不起作用,IE8对我来说是一个交易破坏者：

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

原文地址：https://www.jb51.cc/css/216066.html