添加背景圖像時輸入邊框變化

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