重置输入元素的样式和重新设置以恢复默认外观 [英] Reset Styles for input elements and restyling to bring back the default appearance

问题描述

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

 < input name =1onfocus =this.value =' 'type =textsize =20value =input 1title =在此输入您的搜索/> 
  

因为不同的浏览器会添加不同数量的填充，边距和边框，所以我必须将其重置为

 输入
 {
 padding：0; 
保证金：0; 
 border：0; 
 border：none; 
} 
  

现在我有了一个未设计的样式（留下其他属性，如字体大小或光标单独为运动），我想恢复重置前的默认值，但带有一致的值，以便所有浏览器中的外观和尺寸相同。我做

$ $ p $ $ $ $ $
$ border：1px inset＃F0F0F0;
}

然而，它改变了一些东西，看起来并不像这个小提琴那样当第二个输入（输入2）被复位（边界：0;边界：无;）并且再次重新定义（边界：1px插入＃F0F0F0;）时，第一个输入（输入1）没有用边界属性复位。 / p>

jsFiddle

如何在应用样式重置后重新获得相同的外观。 一旦你改变它们，就可以得到默认样式。如果你想规范化边界和填充跨浏览器，只是标准化边距和填充，不要触及任何其他样式，特别是边框和背景。

I have a simple input field.

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

Because different browsers add different amounts of padding, margin and border to it, I have to reset it as follows.

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

Now I have a unstyled (leaving other properties such as font-size or cursor alone for the movement) and I want to bring back the appearnce that were default before the reset but with consistant values so that the appearance as well as the dimensions are same in all browsers. I do

input
{
border: 1px inset #F0F0F0;
}

However it changes something and the appearnce is not the same as per this fiddle where the first input (input 1) has not been reset with the border property while the second input (input 2) has been reseted (border: 0; border: none;) and again restyled (border: 1px inset #F0F0F0;).

jsFiddle

How do I get the same appearance back after applying a style reset to it.

解决方案

You can't get the default styles back once you change them. If you want to normalize the margins and padding across browsers, just normalize the margins and padding and don't touch any of the other styles, especially border and background.

这篇关于重置输入元素的样式和重新设置以恢复默认外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！