如何使用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>

的CSS

div.myButton input {

    background:url(/images/Btn.PNG) no-repeat;

    cursor:pointer;

    width: 200px;

    height: 100px;

    border: none;

}

即使在Safari中也可以在任何地方使用。

Answer 3

本文有关CSS图像替换提交按钮的文章可能会有所帮助。

“使用这种方法，当样式表处于活动状态时，您将获得一个可点击的图像，而当样式表处于关闭状态时，将获得一个标准按钮。诀窍是将图像替换方法应用于按钮标签，并将其用作提交按钮，而不是使用的输入。

而且，由于按钮的边界被擦除，这也是可推荐的变化的按钮光标形一个用于链接的手，因为这提供了一个可视前端到用户“。

CSS代码：

#replacement-1 {

  width: 100px;

  height: 55px;

  margin: 0;

  padding: 0;

  border: 0;

  background: transparent url(image.gif) no-repeat center top;

  text-indent: -1000em;

  cursor: pointer; /* hand-shaped cursor */

  cursor: hand; /* for IE 5.x */

}

#replacement-2 {

  width: 100px;

  height: 55px;

  padding: 55px 0 0;

  margin: 0;

  border: 0;

  background: transparent url(image.gif) no-repeat center top;

  overflow: hidden;

  cursor: pointer; /* hand-shaped cursor */

  cursor: hand; /* for IE 5.x */

}

form>#replacement-2 { /* For non-IE browsers*/

  height: 0px;

}