javascript - 背景图像更改按钮在 Firefox 中的默认样式

Question

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

检查 fiddle 示例:example [在 Firefox 中打开]

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

我试着把它添加到右下角的按钮，它对我有用，

但问题是，按钮的样式和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%;

}

Answer 1

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

这里有一些有用的链接:

http://fontawesome.io/

编辑:用按钮标签替换了最后一个输入

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

并在里面添加了图标字体符号这也是演示(包括 Font Awesome CSS):

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