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

Question

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

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

如何让它们看起来一样？

这是解决这个问题的 JsFriddle

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

但基本上是

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

和

input {
    text-align: right
}
#two {
    background-image:  url(http://www.dhtmlgoodies.com/tips-and-tricks/input-with-background/images/magnifying-glass.gif);
    background-repeat: no-repeat;
}

提前谢谢大家。

Answer 1

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

已更新 - Have a basic fiddle!

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

documentation over on the MDN可能对你有用。

---

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

Have a nicer fiddle!

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

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

#two {
    background-position: 5px;
}