Question

我有一个简单的输入字段。

<input name="1" onfocus="this.value=''" type="text" size="20" value="input 1" title="Enter your search here" />

因为不同的浏览器会添加不同数量的填充，边距和边框，所以我必须按如下方式重置它。

input
{
padding: 0;
margin: 0;
border: 0;
border: none;
}

现在我有一个没有样式（留下其他属性，如字体大小或光标单独的移动），我想恢复在重置之前默认的出现但具有一致的值，以便外观以及所有浏览器的尺寸都相同。我做了

input
{
border: 1px inset #F0F0F0;
}

然而它改变了一些东西，并且出现性与这个小提琴不同，其中第一个输入（输入1）没有用border属性重置，而第二个输入（输入2）已被重置（border：0; border：none;）并再次重新设置（border：1px inset＃F0F0F0;）。

jsFiddle

如何在对其应用样式重置后获得相同的外观。

Answer 1

更改后无法恢复默认样式。如果要在浏览器中规范化边距和填充，只需标注边距和填充，不要触及任何其他样式，尤其是边框和背景。

Answer 2

简短回答是改变

border: 1px inset #F0F0F0;

到

border: 1px solid #A9A9A9;

长答案

我觉得OP在他们的小提琴中遇到的问题有一个更好的答案。

问题在于他们使用inset而不是solid。

这是原始的js小提琴代码：

input
{
    padding: 0;
    margin: 0;
}

input[name="1"]
{
    margin: 10px;
}

input[name="2"]
{
    border: none;
    border: 0;
    border: 1px inset #F0F0F0;
}

<input name="1" onfocus="this.value=''" type="text" size="20" value="input 1" title="Enter your search here" />
<input name="2" onfocus="this.value=''" type="text" size="20" value="input 2" title="Enter your search here" />

以下是我认为OP正在寻找的解决方案：

input
{
    padding: 0;
    margin: 0;
}

input[name="1"]
{
    margin: 10px;
}

input[name="2"]
{
    border: 1px solid #A9A9A9;
}

<input name="1" onfocus="this.value=''" type="text" size="20" value="input 1" title="Enter your search here" />
<input name="2" onfocus="this.value=''" type="text" size="20" value="input 2" title="Enter your search here" />

我所改变的只是

input[name="2"]
{
    border: none;
    border: 0;
    border: 1px inset #F0F0F0;
}

到

input[name="2"]
{
    border: 1px solid #A9A9A9;
}

无需将border设置为none，然后将其设置为0，然后将其设置为所需的设置。这样做的唯一原因是，如果不同浏览器需要不同的后备选项。但据我所知，所有应该考虑的浏览器都支持基本的边界属性和上面的简写。至于我更改的实际设置，inset为您提供了旧的3D-ish外观切割，颜色太接近jsFiddle背景，此颜色看起来更接近我在大多数浏览器中看到的默认值。

重置输入元素和重新打印的样式以恢复默认外观

2 个答案: