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

您可以使用<button>标签.对于提交,只需添加即可type="submit".然后在希望按钮显示为图形时使用背景图像.

像这样:

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>

更多信息:http://htmldog.com/reference/htmltags/button/

Answer 3

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 4

这篇关于提交按钮的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;
}

Answer 5

这是一个更简单的解决方案,但没有额外的周围div:

<input type="submit" value="Submit">

CSS使用基本的图像替换技术.对于奖励积分,它显示使用图像精灵:

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

资料来源:http: //work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/