CSS 默认文本框边框样式和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1232188/
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
Default textbox border-style and width
提问by maxp
IE7 and FFox seem to render textboxes very slightly differently by default.
默认情况下，IE7 和 FFox 呈现的文本框似乎略有不同。
This seems to be fixed by setting their border-style and border-width css properties.
这似乎可以通过设置它们的边框样式和边框宽度 css 属性来解决。
The odd thing is, it seems that out of all the options vstudios intellisense gives me, none of them match?
奇怪的是，在 vstudios intellisense 给我的所有选项中，似乎没有一个匹配？
The closest I've found is
我发现的最接近的是
border-width:1px;
border-style:inset;
Edit: Trying to set the style for a textbox, they all appear to render differently in various browsers.
编辑：尝试设置文本框的样式时，它们在各种浏览器中的呈现方式都不同。
回答by Amber
According to Firebug, the default style for a textbox in Firefox is
根据 Firebug，Firefox 中文本框的默认样式是
border: 2px inset #EBE9ED;
回答by Xagrand
This is the first question/result that comes up via Google when looking for this sort of thing, so I thought I'd provide the answer I was looking for personally.
这是在寻找此类事情时通过 Google 出现的第一个问题/结果，所以我想我会提供我个人正在寻找的答案。
the answer is to set the style to '' or "";
答案是将样式设置为 '' 或 ""；
If this is unclear, I am providing an example involving javascript/jquery, assuming you get that at a basic level. Naturally, the box starts off at a default. Let's assume I change it with code to be red, when someone clicks on that textbox...
如果这不清楚，我将提供一个涉及 javascript/jquery 的示例，假设您在基本级别上得到了它。自然地，该框以默认值开始。假设我将代码更改为红色，当有人单击该文本框时...
$("#phoneBox").focus(function(){
document.getElementById('telephone').style.border = '1px solid red';
}
That will set it to red someone clicks into that textbox. Now, however, let's assume I want to set it back to normal when someone clicks away from the box
这会将它设置为红色，有人点击该文本框。但是，现在让我们假设我想在有人点击盒子时将其恢复正常
$("#phoneBox").blur(function(){
document.getElementById('telephone').style.border = '';
}
The box will go back to the default style, since it has no values to go off of.
该框将返回到默认样式，因为它没有要关闭的值。
In your CSS, just
在您的 CSS 中，只需
border:'';
or to be thorough,
或要彻底，
border-style:'';
border-width:'';
border-color:'';
will render the default in any browser. I hope that this makes sense/helps others.
将在任何浏览器中呈现默认值。我希望这有意义/可以帮助其他人。
回答by Ing óscar Bonilla MBA
Maybe you will not believe me, but I try this:
也许你不会相信我，但我试试这个：
<input style="border:default">
and it works in Windows Internet Explorer 8, Firefox 3.6.22 and Chrome 14.0.835
它适用于 Windows Internet Explorer 8、Firefox 3.6.22 和 Chrome 14.0.835
I think <input style="border:XXX"> <input style="border:XXX">works too. The point is that if you use an invalid border style, then the input box goes back to its default border style.
我认为<input style="border:XXX"> <input style="border:XXX">也有效。关键是，如果您使用无效的边框样式，则输入框将返回其默认边框样式。
回答by Claudio Floreani
Fist of all, the borderCSS property is a shorthand property for setting the individual border property values for one or more of: border-width, border-style, border-color.
首先，borderCSS 属性是一种简写属性，用于为以下一个或多个设置单独的边框属性值：border-width、border-style、border-color。
The initial value of border-styleis none. This means that if you change the border-widthand the border-color, you will not see the border unless you change this property to something other than noneor hidden.
的初始值border-style是none。这意味着如果更改border-width和border-color，除非将此属性更改为none或以外的内容，否则您将看不到边框hidden。
The initial value of border-widthis medium, but the specification doesn't precisely define its corresponding width. For example, my Safari browser currently display mediumas a width of 3px;
的初始值border-width是medium，但规范并没有精确定义其对应的宽度。例如，我的 Safari 浏览器当前显示medium为3px;
The initial value of border-coloris currentColor, this keyword represents the calculated value of the element's color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default.
的初始值border-color是currentColor，该关键字表示元素的颜色属性的计算值。它允许使颜色属性由属性或默认情况下不继承它的子元素属性继承。
That said, always keep in mind that if your defaults seems different, maybe some properties are computed from some other declarations, that is user agent declarations, user normal declarations, author normal declarations, author important declarations or user important declarations. When different properties applies to the same element, the more specific selectors will override the others and when several declarations have the same weight, origin and specificity, the latter in the source order wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
也就是说，请始终记住，如果您的默认值看起来不同，也许某些属性是根据其他一些声明计算的，即用户代理声明、用户正常声明、作者正常声明、作者重要声明或用户重要声明。当不同的属性应用于同一个元素时，更具体的选择器将覆盖其他选择器，当多个声明具有相同的权重、来源和特异性时，源顺序中的后者获胜。导入的样式表中的声明被视为在样式表本身的任何声明之前。
TL;DR?
特尔；博士？
The default is border: medium none currentColor;but that is valid as long as no other selector or declaration applies.
默认是border: medium none currentColor;但只要没有其他选择器或声明适用，它就有效。
回答by Ing óscar Bonilla MBA
Sorry, I was wrong. If you use an invalid border style, then the input box will ignore it, and it will not change.
对不起我错了。如果使用了无效的边框样式，那么输入框会忽略它，并且不会改变。
The closest I've found is
我发现的最接近的是
border:inset 2px #EBE9ED;
border-right:solid 1px #CCCCCC;
border-bottom:solid 1px #CCCCCC;
But it is different than the default style in the 3 browsers
但它与 3 个浏览器中的默认样式不同
