在Firefox中的背景圖像更改按鈕的默認樣式

我正在製作一個在Firefox中運行的數字鍵盤。在Firefox中的背景圖像更改按鈕的默認樣式

檢查小提琴例如：example [打開在Firefox]

我的問題是，我試圖添加一個清晰的圖像象下面這樣：

enter image description here

我試着將它添加到右下角按鈕，它適用於我，

但問題是，該按鈕的樣式和mouseon或click已被更改。

只要點擊其他數字按鈕，感受不同之處。

我想知道，如果有一種方式只是添加圖片到這個按鈕而不破壞它的默認風格。

HTML：

<div style="width: 755px; margin: 0 auto; "> 
<div class="button-pad"> 
     <input type="button" value="1" onclick="" /> 
     <input type="button" value="2" onclick="" /> 
     <input type="button" value="3" onclick="" /> 
    </div> 
    <div class="button-pad"> 
     <input type="button" value="4" onclick="" /> 
     <input type="button" value="5" onclick="" /> 
     <input type="button" value="6" onclick="" /> 
    </div> 
    <div class="button-pad"> 
     <input type="button" value="7" onclick="" /> 
     <input type="button" value="8" onclick="" /> 
     <input type="button" value="9" onclick="" /> 
    </div> 
    <div class="button-pad"> 
     <input type="button" value="" /> 
     <input type="button" value="0" onclick="" /> 
     <input type="button" value="" onclick="" style="background-image:url(./img/clear.jpg);background-repeat:no-repeat;background-position:center"/> 
    </div> 
</div>

CSS：

.button-pad > input{ 


color: #000000; 
font-size: 40px; 
font-weight: bold; 
padding: 15px; 
width: 15%; 

}

來源

2014-01-23 JavaScripter

最好的辦法是使用圖標字體在這種情況下，這樣你可以增加價值的按鈕，而不是添加背景圖片：

這裏有一些有用的鏈接：

http://fontawesome.io/

編輯：最後輸入替換機智的按鈕標籤

<button><i class=" icon-remove"></i></button>

，並添加圖標字體符號內這裏的演示太（與字體真棒CSS包括）：

http://jsfiddle.net/darkosss/msnbd/

來源

2014-01-23 02:07:20 Darko

這是真正有用的 – JavaScripter

歡迎您，如果您仍想使用類型=「按鈕」這裏是你如何能做到這一點以類似的方式HTTP：/ /jsfiddle.net/darkosss/93JSx/ 很抱歉忘記提及這裏的鏈接，你可以在這裏找到其他unicode格式的圖標 http://fortawesome.github.io/Font-Awesome/cheatsheet/ – Darko

代替使用輸入type="button"你可以使用<button />，然後把HTML像img放在裏面。

<button value=""><img src="../img/clear.jpg" /></button>

或與風格div

<button value=""><div style="background:url(../img/clear.jpg) no-repeat center center" /></button>

來源

2014-01-23 02:12:41

我感謝你的幫助，但是可以保持使用type =「button」嗎？ – JavaScripter

輸入類型=「按鈕」和按鈕之間沒有任何區別，除了按鈕允許其中的html，因此更靈活一些。 –

在Firefox中的背景圖像更改按鈕的默認樣式

回答

相關問題