添加背景图像时输入边框更改

Question

当我向输入添加背景图像时，它的边框也发生了变化。

所以现在我的按钮看起来与其他按钮不同。

我怎样才能让它们看起来一样？

这是这个问题的 JsFriddle

http://jsfiddle.net/apLm5rgq/1/

但基本上是

<input id='one'  value='One'/>
<br/>
<input id='two'  value='Two'/>

和

<input id='one'  value='One'/>
<br/>
<input id='two'  value='Two'/>

提前谢谢大家。

Answer 1

要保持默认输入样式，请为输入显式设置border-width和border-style。这适用于 Chrome 和 IE - 在 Firefox 中，它从默认值稍微改变了边框颜色，但所有文本输入的样式都是一致的。这可以让您获得所需结果的 90%。

更新 -有一个基本的小提琴！

input {
    border-width: 1px;
    border-style: inset outset outset inset; 
    /* 
     Seems to be most browsers default (tested on Windows)
    */
}

在以上的MDN文档可能对你有用。

您还可以在输入上设置自己的边框，以在浏览器和操作系统之间保持一致的外观。

有一个更好的小提琴！

input {
    text-align: right;
    border: solid 1px #ADA9A5;
    border-radius: 3px;
    padding: 5px;
    margin: 10px;
}

此外，定位您的背景background-position以补偿输入填充。

#two {
    background-position: 5px;
}