4

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

<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）尚未使用边框属性重置，而第二个输入（输入 2）已重置（边框：0；边框：无;) 并再次重新设置样式（边框：1px inset #F0F0F0;）。

jsFiddle

应用样式重置后如何恢复相同的外观。

4

2 回答 2

5

一旦更改默认样式，您将无法恢复它们。如果你想标准化跨浏览器的边距和填充，只需标准化边距和填充，不要触及任何其他样式，尤其是边框和背景。

于 2012-09-10T11:59:41.903 回答
1

简短的回答是改变

border: 1px inset #F0F0F0;

到

border: 1px solid #A9A9A9;

长答案

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

问题在于他们使用 ofinset而不是solid.

这是原始的 js Fiddle 代码：

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;
}

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

于 2016-05-24T19:28:39.853 回答