Question

IE7和FFox默认情况下渲染文本框的方式略有不同。

这似乎可以通过设置border-style和border-width css属性来解决。

奇怪的是，似乎vstudios intellisense给出的所有选项中，没有一个匹配？

我找到的最接近的是

border-width:1px;
border-style:inset;

编辑：尝试设置文本框的样式，它们在各种浏览器中的呈现方式都不同。

Answer 1

根据Firebug，Firefox中文本框的默认样式是

border: 2px inset #EBE9ED;

Answer 2

这是Google在寻找此类事情时首先提出的问题/结果，所以我想我会提供我个人想要的答案。

答案是将样式设置为''或“”;

如果不清楚，我提供一个涉及javascript / jquery的例子，假设你在基本级别得到它。当然，盒子默认开始。我们假设当有人点击该文本框时，我将代码更改为红色...

$("#phoneBox").focus(function(){
       document.getElementById('telephone').style.border = '1px solid red';
       }

这会将其设置为红色，有人点击该文本框。但是，现在让我们假设当有人点击框时，我想将它恢复正常

$("#phoneBox").blur(function(){
       document.getElementById('telephone').style.border = '';
       }

该框将返回默认样式，因为它没有值。

在你的CSS中，只需

border:'';

或彻底，

border-style:'';
border-width:'';
border-color:'';

将在任何浏览器中呈现默认值。我希望这有意义/帮助他人。

Answer 3

也许你不会相信我，但我试试这个：

<input style="border:default">

并且适用于Windows Internet Explorer 8，Firefox 3.6.22和Chrome 14.0.835

我认为<input style="border:XXX"> <input style="border:XXX">也有效。关键是如果使用无效的边框样式，则输入框将返回其默认边框样式。

Answer 4

首先，border CSS属性是一个简写属性，用于为border-width，border-style，border-color中的一个或多个设置各个边框属性值。

border-style的初始值为none。这意味着，如果您更改border-width和border-color，除非您将此属性更改为none或hidden以外的其他内容，否则您将看不到边框。

border-width的初始值为medium，但规范并未精确定义其对应的宽度。例如，我的Safari浏览器当前显示medium宽度为3px;

border-color的初始值为currentColor，此关键字表示元素的颜色属性的计算值。它允许使属性或子元素属性继承的颜色属性默认不继承它。

也就是说，请记住，如果您的默认值看起来不同，也许某些属性是从其他一些声明中计算出来的，即用户代理声明，用户正常声明，作者正常声明，作者重要声明或用户重要声明。当不同属性应用于同一元素时，更具体的选择器将覆盖其他属性，并且当多个声明具有相同的权重，来源和特异性时，后者在源顺序中获胜。导入样式表中的声明被认为是在样式表本身中的任何声明之前。

<强> TL; DR

默认值为border: medium none currentColor;，但只要没有其他选择器或声明适用，它就是有效的。

Answer 5

抱歉，我错了。如果使用无效的边框样式，则输入框将忽略它，并且不会更改。

我找到的最接近的是

border:inset 2px #EBE9ED;
border-right:solid 1px #CCCCCC;
border-bottom:solid 1px #CCCCCC;

但它与3个浏览器中的默认样式不同

默认文本框边框样式和宽度

5 个答案: