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

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