Firefox中的background-image更改按钮的默认样式

Question

我正在制作一个在Firefox中运行的小键盘。

检查小提琴示例：example [在Firefox中打开]

我的问题是，我试图添加如下的清晰图像：

我尝试将其添加到右下角按钮，它适用于我，

但问题是，按钮的样式和鼠标或点击已更改。

只需点击其他数字按钮即可感受到差异。

我想知道，如果有一种方法只是添加pic到这个按钮而不破坏它的默认值 风格。

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

}

Answer 1

在这种情况下，最好的方法是使用图标字体，这样您就可以为按钮添加值而不是添加背景图像：

这里有一些有用的链接：

http://fontawesome.io/

编辑：用按钮标记

替换最后一个输入

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

并在里面添加了图标字体符号 这里也是演示（包括Font Awesome CSS）：

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

Answer 2

您可以使用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>