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

【问题标题】：CSS Apply border to all input elements except checkboxCSS将边框应用于除复选框以外的所有输入元素
【发布时间】：2011-10-02 20:54:44
【问题描述】：

我有一个 CSS 类：

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

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

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

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

这适用于 FireFox 和 Chrome，但不适用于 ie 8，当我使用 ie 中的开发人员工具检查元素时，我可以看到两种样式都已被选中，但只有当我取消选择输入样式旁边的复选框时复选框的边框是否消失。

这是默认设置：

这就是我为摆脱边界所做的：

【问题讨论】：

标签： css

【解决方案1】：

好像是medium none。你可以试试border: 0px transparent; 看看是否有什么不同。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

编辑：

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

如果你添加一个文档类型，即使是简单的也可以在 IE8 中工作

【讨论】：

试过了，但使用 input:not([type=checkbox]) 没有一个输入应用了所需的边框。
IE 属性选择器解析很粗糙。这也是你的根本问题的原因。如果您使用类而不是属性选择器，或者当您确保存在正确的文档类型（例如简单的）时，border:none 覆盖就可以正常工作。
将类直接应用到复选框效果很好。谢谢史蒂文

【解决方案4】：

这有帮助吗？

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

【讨论】：