如何使用 CSS 更改输入按钮图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/195632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change an input button image using CSS?
提问by Baltimark
So, I can create an input button with an image using
所以，我可以使用图像创建一个输入按钮
<INPUT type="image" src="/images/Btn.PNG" value="">
But, I can't get the same behavior using CSS. For instance, I've tried
但是，我无法使用 CSS 获得相同的行为。例如，我试过
<INPUT type="image" class="myButton" value="">
where "myButton" is defined in the CSS file as
其中“myButton”在 CSS 文件中定义为
.myButton {
background:url(/images/Btn.PNG) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}
If that's all I wanted to do, I could use the original style, but I want to change the button's appearance on hover (using a myButton:hoverclass). I know the links are good, because I've been able to load them for a background image for other parts of the page (just as a check). I found examples on the web of how to do it using JavaScript, but I'm looking for a CSS solution.
如果这就是我想要做的，我可以使用原始样式，但我想在悬停时更改按钮的外观（使用myButton:hover类）。我知道链接很好，因为我已经能够加载它们作为页面其他部分的背景图像（作为检查）。我在网上找到了有关如何使用 JavaScript 执行此操作的示例，但我正在寻找 CSS 解决方案。
I'm using Firefox 3.0.3 if that makes a difference.
如果这有所不同，我正在使用 Firefox 3.0.3。
采纳答案by ceejayoz
If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image". type="image" expects a SRC, which you can't set in CSS.
如果您想使用 CSS 设置按钮样式，请将其设为 type="submit" 按钮而不是 type="image"。type="image" 需要一个 SRC，你不能在 CSS 中设置它。
Note that Safari won't let you style any button in the manner you're looking for. If you need Safari support, you'll need to place an image and have an onclick function that submits the form.
请注意，Safari 不会让您以您正在寻找的方式设置任何按钮的样式。如果您需要 Safari 支持，则需要放置图像并具有提交表单的 onclick 功能。
回答by Dimitry
You can use the <button>tag. For a submit, simply add type="submit". Then use a background image when you want the button to appear as a graphic.
您可以使用<button>标签。对于提交，只需添加type="submit". 然后当您希望按钮显示为图形时使用背景图像。
Like so:
像这样：
<button type="submit" style="border: 0; background: transparent">
<img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>
回答by SI Web Design
HTML
HTML
<div class="myButton"><INPUT type="submit" name="" value=""></div>
CSS
CSS
div.myButton input {
background:url(/images/Btn.PNG) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}
This will work anywhere, even in Safari.
这将适用于任何地方，甚至在 Safari 中。
回答by splattne
This article about CSS image replacement for submit buttonscould help.
这篇关于提交按钮的 CSS 图像替换的文章可能会有所帮助。
"Using this method you'll get a clickable image when style sheets are active, and a standard button when style sheets are off. The trick is to apply the image replace methods to a button tag and use it as the submit button, instead of using input.
And since button borders are erased, it's also recommendable change the button cursor to
the hand shaped one used for links, since this provides a visual tip to the users."
“使用这种方法，当样式表处于活动状态时，您将获得一个可点击的图像，当样式表关闭时，您将获得一个标准按钮。诀窍是将图像替换方法应用于按钮标签并将其用作提交按钮，而不是使用输入。
并且由于按钮边框被擦除，因此建议将按钮光标更改为用于链接的手形光标，因为这为用户提供了视觉提示。”
The CSS code:
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;
}
回答by philoye
Here's a simpler solution but with no extra surrounding div:
这是一个更简单的解决方案，但没有额外的周围 div：
<input type="submit" value="Submit">
The CSS uses a basic image replacement technique. For bonus points, it shows using an image sprite:
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>
Source: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/
来源：http: //work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/
回答by user545376
Here is what worked for me on Internet Explorer, a slight modification to the solution by Philoye.
这是在 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;
}
回答by dafyk
You can use blank.gif (1px transparent image) as target in your tag
您可以在标签中使用 blank.gif（1px 透明图像）作为目标
<input type="image" src="img/blank.gif" class="button">
and then style background in css:
然后在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;}
回答by Reed Richards
A variation on the previous answers. I found that opacity needs to be set, of course this will work in IE6 and on. There was a problem with the line-height solution in IE8 where the button would not respond. And with this you get a hand cursor as well!
先前答案的变体。我发现需要设置不透明度，当然这适用于 IE6 及更高版本。IE8 中的 line-height 解决方案存在按钮没有响应的问题。有了这个，你也会得到一个手形光标！
<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;
}
回答by inf3rno
I think the following is the best solution:
我认为以下是最好的解决方案：
css:
css：
.edit-button {
background-image: url(edit.png);
background-size: 100%;
background-repeat:no-repeat;
width: 24px;
height: 24px;
}
html:
html：
<input class="edit-button" type="image" src="transparent.png" />
回答by John
My solution without js and without images is this:
我没有 js 和图像的解决方案是这样的：
*HTML:
* HTML：
<input type=Submit class=continue_shopping_2
name=Register title="Confirm Your Data!"
value="confirm your data">
*CSS:
* 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;}
