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/