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

777588 次浏览
小开
最佳答案

如果您希望使用 CSS 对按钮进行样式设计，那么将其设置为 type = “ commit”按钮，而不是 type = “ image”。Type = “ image”需要一个 SRC，您不能在 CSS 中设置它。

请注意，Safari 不会让您按照所寻找的方式设计任何按钮。如果需要 Safari 支持，则需要放置一个图像并具有一个 onclick 函数来提交表单。

小开

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

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

像这样:

<button type="submit" style="border: 0; background: transparent">
<img src="https://i.imgur.com/tXLqhgC.png" width="90" height="90" alt="submit" />
</button>

更多信息

小开

也许您也可以导入一个.js 文件，然后在那里用 JavaScript 替换图像。

小开 

div.myButton input {
background: url(https://i.imgur.com/tXLqhgC.png) no-repeat;
background-size: 90px;
width: 90px;
height: 90px;
cursor: pointer;
border: none;
}
<div class="myButton">
<INPUT type="submit" name="" value="">
</div>

这在任何地方都可以使用，甚至在 Safari 中也可以。

小开

这里有一个更简单的解决方案，但是没有额外的 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;
}
小开

您可以使用 空白 GIF(一个像素的透明图像)作为标记中的目标:

<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;}
小开

与前面的答案不同的是:

我发现不透明度需要设置，当然，这将在 Internet Explorer 6等工作。Internet Explorer 8的线高解决方案出现了一个问题，按钮没有响应。有了这个，你还可以得到一个手指光标！

<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" />
小开

没有 JavaScript 和图片的解决方案是:

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;
}
小开

假设您不能更改输入类型，甚至不能更改 Src。

如果你知道你想要的高度，并且你有一个你想要使用的背景图片的 URL，你就走运了。

将高度设置为零，将 paddingtop 设置为所需的高度。这将把原始图像推出视线之外，给你一个非常干净的空间来显示你的 CSS 背景图像。

它可以在 Chrome 中使用。我不知道它在 Internet Explorer 里能不能用。几乎没有什么聪明的东西可以做到，所以可能不会。

#daft {
height: 0;
padding-top: 100px;
width: 100px;
background-image: url(clever.jpg);
}
<input type="image" src="daft.jpg" id="daft">


提交答案