如何使用CSS更改输入按钮图像？

Question

因此，我可以使用创建带有图像的输入按钮

<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，如果有帮助的话。

Answer 1

如果要使用CSS为按钮设置样式，请将其设置为type =“ submit”按钮，而不是type =“ image”。type =“ image”需要一个SRC，您无法在CSS中设置它。请注意，Safari不允许您以所需的方式设置任何按钮的样式。如果需要Safari支持，则需要放置图片并具有提交表单的onclick函数。

Answer 2

的HTML<div class="myButton"><INPUT type="submit" name="" value=""></div>的CSSdiv.myButton input {&nbsp; &nbsp; background:url(/images/Btn.PNG) no-repeat;&nbsp; &nbsp; cursor:pointer;&nbsp; &nbsp; width: 200px;&nbsp; &nbsp; height: 100px;&nbsp; &nbsp; border: none;}即使在Safari中也可以在任何地方使用。

Answer 3

本文有关CSS图像替换提交按钮的文章可能会有所帮助。“使用这种方法，当样式表处于活动状态时，您将获得一个可点击的图像，而当样式表处于关闭状态时，将获得一个标准按钮。诀窍是将图像替换方法应用于按钮标签，并将其用作提交按钮，而不是使用的输入。而且，由于按钮的边界被擦除，这也是可推荐的变化的按钮光标形一个用于链接的手，因为这提供了一个可视前端到用户“。CSS代码：#replacement-1 {&nbsp; width: 100px;&nbsp; height: 55px;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; border: 0;&nbsp; background: transparent url(image.gif) no-repeat center top;&nbsp; text-indent: -1000em;&nbsp; cursor: pointer; /* hand-shaped cursor */&nbsp; cursor: hand; /* for IE 5.x */}#replacement-2 {&nbsp; width: 100px;&nbsp; height: 55px;&nbsp; padding: 55px 0 0;&nbsp; margin: 0;&nbsp; border: 0;&nbsp; background: transparent url(image.gif) no-repeat center top;&nbsp; overflow: hidden;&nbsp; cursor: pointer; /* hand-shaped cursor */&nbsp; cursor: hand; /* for IE 5.x */}form>#replacement-2 { /* For non-IE browsers*/&nbsp; height: 0px;}