标签: input-button-image

所以,我可以创建一个带图像的输入按钮

<INPUT type="image" src="/images/Btn.PNG" value="">

但是,我无法使用CSS获得相同的行为.例如,我试过了

<INPUT type="image" class="myButton" value="">

其中"myButton"在CSS文件中定义为

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

如果这就是我想做的,我可以使用原始样式,但我想在悬停时更改按钮的外观(使用myButton:hover类).我知道链接很好,因为我已经能够为页面的其他部分加载它们作为背景图像(就像检查一样).我在网上找到了如何使用JavaScript进行操作的示例,但我正在寻找一个CSS解决方案.

我正在使用Firefox 3.0.3,如果这有所作为.

我的index.html中有以下代码

<li>
<select name="cmbtype" style="display:none" id="cmbtype" onChange="Changetype()">
<option value="0">
<input type="image" src="images/ocean.png" value="Play" onclick="previewplay(); " /> 
</option>
</select> 
</li>

在firefox,opera和IE 7中,我看到了ocean.png并且能够点击它.当我这样做时,相应地播放它应该播放的mp3!

当我在Safari(Windows和Mac)以及Chrome中加载相同的代码时,看不到ocean.png并且没有可点击的按钮？

我可以添加或做些什么来使这些代码/设计在Safari和Chrome中运行吗？

谢谢