CSS将边框应用于复选框以外的所有输入元素

Question

我有一个css类:

input {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    border: 1px solid #003399;
}

这适用于我想要的大部分内容,但我现在需要一个没有此边框的复选框,而页面上的其余输入元素继续应用边框.

因此我创建了额外的css类:

input[type="checkbox"] 
{
    border: none;
}

这适用于FireFox和Chrome但不是8,当我使用开发者工具来检查元素时我可以看到两种样式都被拾取但是只有当我取消选择输入样式旁边的复选框时才会出现边框消失的复选框.

这是默认值:

在此输入图像描述

这就是我摆脱边界的方法:

在此输入图像描述

Answer 1

为什么不使用:not选择器来反转属性选择器？

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

如果是IE8或之前,你应该使用不同的规则,你的类不希望设置边框,因为它不支持:没有(或任何好东西).

编辑:

input[type=checkbox]
{
    border: none;
}

如果添加doctype,即使是简单的<!doctype html>,也可以在IE8中使用

IE属性选择器解析很糟糕.这也是你的root问题的原因.如果您使用的是类而不是属性选择器,或者当您确定存在正确的doctype时,例如简单的<!doctype html>,则border:none override工作正常. (2认同)