我有一个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中复选框的默认样式.
解决方法
在许多浏览器中,无法将复选框重置为默认的本机样式.
这可能是CSS重置通常不包含此效果规则的原因:
input { border: 0; }
最兼容的技术是这样做:
input[type="text"],input[type="password"] { border: 1px solid black; }
并明确列出您希望设置样式的每种输入.
这将适用于IE7和所有现代浏览器.
你也可以用not()CSS3伪类更整洁地做到这一点,但这在IE8中不起作用,IE8对我来说是一个交易破坏者:
input:not([type="checkBox"]) { border: 1px solid black; }