html - 重置输入元素的样式并重新设置样式以恢复默认外观

Question

我有一个简单的输入框。

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

因为不同的浏览器给它添加了不同数量的padding、margin和border，所以我必须按如下方式重新设置它。

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

现在我有一个无样式的(保留其他属性，如字体大小或光标单独用于移动)，我想恢复重置前的默认外观但具有一致的值，以便外观和所有浏览器中的尺寸都相同。我愿意

input
{
border: 1px inset #F0F0F0;
}

但是它改变了一些东西并且外观与这个 fiddle 不同，其中第一个输入(输入 1)没有用 border 属性重置，而第二个输入(输入 2)已被重置(边框:0; border: none;) 并再次重新设计样式(border: 1px inset #F0F0F0;)。

jsFiddle

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

Answer 1

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