输入元素及改装重设样式带回默认外观(Reset Styles for input elements

2019-06-28 02:43发布

我有一个简单的输入框。

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

现在我有一个无样式(留下其他属性,如字体大小或者单独光标运动),我想带回了默认的复位前,但与洽值,以便在外观以及尺寸是相同的appearnce在所有浏览器。 我做

input
{
border: 1px inset #F0F0F0;
}

但是它改变的东西和appearnce是不一样的按本小提琴其中第一输入(输入1),而第二输入(输入2)已被reseted(边界尚未重置与边界属性:0;边界:无;),并再次重新设计(边框:1px的插图#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;
}

有没有必要设置边框没有然后将其设置为0,然后将其设置为你想要的设置。 唯一的理由这样做将是是否有必要针对不同的浏览器不同的后备选项。 但据我所知,应该考虑支持与上面的速记的基本border属性所有的浏览器。 至于那我改变了实际设置, inset为您提供了旧3D十岁上下的眼光盯着切割和颜色过于接近的jsfiddle背景加上这个颜色看上去更接近默认我在大多数浏览器看到的。



文章来源: Reset Styles for input elements and restyling to bring back the default appearance