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 selector来反转属性选择器？

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

如果它是IE8或之前，您可能应该为做想要设置边框的类使用单独的规则，因为它不支持：not（或任何好东西） ）。

编辑：

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

如果添加doctype，

在IE8中有效，即使是简单的＆lt;！doctype html＆gt;

Answer 2

好像说medium none。您可以尝试border: 0px transparent;来查看这是否有所不同。

Answer 3

在IE中，它不是您所看到的边界。由于专注于复选框，它必须是突出显示。尝试在复选框上执行模糊事件，单击它可能会有所帮助。

Answer 4

这有帮助吗？

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