在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中的背景图像更改按钮的默认样式

回答

相关问题