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

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

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

如果要使用CSS为按钮设置样式，请将其设置为type =“ submit”按钮，而不是type =“ image”。type =“ image”需要一个SRC，您无法在CSS中设置它。

请注意，Safari不允许您以所需的方式设置任何按钮的样式。如果需要Safari支持，则需要放置图像并具有提交表单的onclick函数。

您可以使用<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/

的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中也可以在任何地方使用。

这篇有关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;
}

这是一个更简单的解决方案，但周围没有额外的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/

这是在Internet Explorer上为我工作的内容，它是Philoye解决方案的略微修改。

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

您可以在标签中使用blank.gif（1px透明图像）作为目标

<input type="image" src="img/blank.gif" class="button"> 

然后在css中设置背景样式：

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

先前答案的变体。我发现需要设置不透明度，这当然可以在IE6及更高版本中使用。IE8中的行高解决方案存在问题，按钮无法响应。与此同时，您还会得到一个手形光标！

<div id="myButton">
  <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
 background: url("form_send_button.gif") no-repeat;
 width: 62px;
 height: 24px;
 }

#myInputButton { 
 background: url("form_send_button.gif") no-repeat;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 width: 67px;
 height: 26px;
 cursor: pointer;
 cursor: hand;
}

我认为以下是最佳解决方案：

CSS：

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 24px;
    height: 24px;
}

的HTML：

<input class="edit-button" type="image" src="transparent.png" />

我没有js且没有图片的解决方案是这样的：

* HTML：

<input type=Submit class=continue_shopping_2 
name=Register title="Confirm Your Data!" 
value="confirm your data">

* CSS：

.continue_shopping_2:hover{
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;}


.continue_shopping_2{
padding:0 0 3px 0;
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:174px;
height:21px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#919191;
font-family:Verdana;
font-size:13px;
font-style:normal;
line-height:normal;
font-weight:bold;
color:#FFFFFF;}

也许您也可以只导入.js文件，并在其中用JavaScript替换图像。

假设您无法更改输入类型，甚至无法更改src。您只有CSS可以玩。

如果知道所需的高度，并且拥有要使用的背景图片的网址，那么您很幸运。

将高度设置为零，并将padding-top设置为所需的高度。这将使原始图像不可见，从而为您提供了一个非常干净的空间来显示CSS背景图像。

在Chrome中工作。不知道它是否可以在IE中使用。几乎没有什么聪明的事情，所以可能不会。

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">