CSS 将边框应用于除复选框之外的所有输入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6651858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Apply border to all input elements except checkbox
提问by Steven Don
I have a css class:
我有一个 css 类：
input {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #003399;
}
Which works for most of what I want but I now need to have a checkbox that doesn't have this border while the rest of the input elements on the page continue to have the border applied.
这适用于我想要的大部分内容，但我现在需要一个没有此边框的复选框，而页面上的其余输入元素继续应用边框。
I therefore created the additional css class:
因此，我创建了额外的 css 类：
input[type="checkbox"]
{
border: none;
}
This works fine with FireFox and Chrome but not ie 8, an when I use the Developer Tools in ie to inspect the element I can see both styles have been picked up but it's only when I deselect the check box beside the input style does the border disappear for the check boxes.
这适用于 FireFox 和 Chrome，但不适用于 ie 8，当我使用 ie 中的开发人员工具检查元素时，我可以看到两种样式都已被选中，但只有当我取消选择输入样式旁边的复选框时才会出现边框复选框消失。
This is the default:
这是默认值：
And this is what I do to get rid of the border:
这就是我为摆脱边界所做的：
回答by Steven Don
Why not just use the :not selector to invert the attribute selector?
为什么不直接使用 :not 选择器来反转属性选择器？
input:not([type=checkbox])
{
border: 1px solid #039;
}
If it is IE8 or before, you should probably use separate rules for the classes where you dowant to set the border, as it doesn't support :not (or any of the good stuff).
如果是IE8或之前，你应该使用不同的规则，你的类不希望设置边框，因为它不支持：没有（或任何好东西）。
Edit:
编辑：
input[type=checkbox]
{
border: none;
}
works in IE8 if you add a doctype, even the simple <!doctype html>
如果添加 doctype，即使是简单的 <!doctype html> 也可以在 IE8 中使用
回答by punkrockbuddyholly
It seems to say medium none. You could try border: 0px transparent;to see if that make's a difference.
好像是说medium none。你可以试试看border: 0px transparent;有没有区别。
回答by ShankarSangoli
In IE it is not the border that you are seeing. It must be the highlighting due to the focus on the checkbox. Try to execute blur event on checkbox click it might help.
在 IE 中，它不是您看到的边框。由于焦点在复选框上，因此它必须是突出显示的。尝试在复选框单击时执行模糊事件可能会有所帮助。
回答by Slavenko Miljic
does this help?
这有帮助吗？
input[type="checkbox"]
{
border: none !important;
}
