Html 如何使提交按钮中的值透明？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2855055/
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 make the value in submit button ,transparent?
提问by aquero
I have a submit button in a form and i use a css class which sets a background image as the submit button. I need to give a value to this submit button, but i dont want it to be displayed to the user. If i set the css color property to transparent it works fine in my firefox 3.6. But the value gets displayed in ie 6 and 7. How can i solve this problem?
我在表单中有一个提交按钮，我使用一个 css 类将背景图像设置为提交按钮。我需要给这个提交按钮一个值，但我不希望它显示给用户。如果我将 css 颜色属性设置为透明，它在我的 Firefox 3.6 中工作正常。但是值显示在 ie 6 和 7 中。我该如何解决这个问题？
<div id="upldTempForm" class="pgcontent">
<form>
<div style="text-align:center;">
<input type="submit" name="create" value="" class="save" />
<input type="button" name="cancel" value="" class="cancel"/>
</div>
</form>
</div>
css
.pgcontent {
background-color:#ECECEC;
border:2px solid #E7E7E7;
margin:30px auto;
width:820px;
font-size:12px;
}
.save{
background-image:url("../images/save.gif");
background-repeat:no-repeat;
width:100px;
height:40px;
cursor:pointer;
background-color:transparent;
border:none;
}
.cancel{
background-image:url("../images/cancel.gif");
background-repeat:no-repeat;
width:110px;
height:40px;
cursor:pointer;
background-color:transparent;
border:none;
}
回答by Joop
Using the text-indent will work.
使用文本缩进将起作用。
Example:
例子：
INPUT[type=button], INPUT[type=submit]
{
font-weight: bold;
color: #000000;
text-indent: -99999px;
text-align: center;
background-color: Transparent;
background-image: url(../images/button.png);
background-repeat: no-repeat;
cursor: pointer;
}
Did some little research after the comment of nailxx. IE is a deal breaker (again).
在nailxx的评论后做了一些研究。IE 是一个交易破坏者（再次）。
For IE add:
对于 IE 添加：
font-size: 0;
display: block;
line-height: 0;
Solution
解决方案
<div id="upldTempForm" class="pgcontent">
<form>
<div>
<input type="submit" name="create" value="Create" class="save" />
<input type="button" name="cancel" value="Cancel" class="cancel"/>
</div>
</form>
</div>
css
.pgcontent
{
background-color:#ECECEC;
border:2px solid #E7E7E7;
margin:30px auto;
width:820px;
font-size:12px;
text-align:center;
}
.save
{
background-image:url("../images/save.gif");
background-repeat:no-repeat;
width:100px;
height:40px;
cursor:pointer;
background-color:transparent;
border:none;
line-height: 100;
overflow: hidden;
}
.cancel
{
background-image:url("../images/cancel.gif");
background-repeat:no-repeat;
width:110px;
height:40px;
cursor:pointer;
background-color:transparent;
border:none;
line-height: 100;
overflow: hidden;
}
回答by Zsolti
You should try to use instead of in this case.
在这种情况下，您应该尝试使用代替。
<button type="submit" name="aa" value="asdf">
<img src="http://www.w3schools.com/images/compatible_safari.gif"/>
</button>
It should do the trick.
<button type="submit" name="aa" value="asdf">
<img src="http://www.w3schools.com/images/compatible_safari.gif"/>
</button>
它应该可以解决问题。
