CSS 隐藏输入按钮值文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/600438/
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
CSS to hide INPUT BUTTON value text
提问by Scott Evernden
I am currently styling an <input type='button'/>element with the following CSS:
我目前正在<input type='button'/>使用以下 CSS 设置元素样式：
background: transparent url(someimage);
color: transparent;
I want the button to show as an image, but I don't want the valuetext to display on top of it. This works fine for Firefox as expected. However, on Internet Explorer 6 and Internet Explorer 7 I can still see the text.
我希望按钮显示为图像，但我不希望value文本显示在它上面。正如预期的那样，这适用于 Firefox。但是，在 Internet Explorer 6 和 Internet Explorer 7 上，我仍然可以看到文本。
I have tried all sorts of tricks to hide the text, but without success. Is there a solution to make Internet Explorer behave?
我尝试了各种技巧来隐藏文本，但没有成功。有没有办法让 Internet Explorer 运行起来？
(I am constrained to use type=buttonbecause this is a Drupal form and its form API doesn't support image-type.)
（我被限制使用，type=button因为这是一个 Drupal 表单，它的表单 API 不支持图像类型。）
采纳答案by Phil.Wheeler
Why are you including the valueattribute at all? From memory, you don't need to specify it (although HTML standards may say you do - not sure). If you do need a valueattribute, why not just state value=""?
你为什么要包括这个value属性？根据记忆，您不需要指定它（尽管 HTML 标准可能会说您这样做 - 不确定）。如果你确实需要一个value属性，为什么不直接 statevalue=""呢？
If you do take this approach, your CSS will need additional properties for the height and width of the background image.
如果你采用这种方法，你的 CSS 将需要额外的背景图像的高度和宽度属性。
回答by Emily
I use
我用
button {text-indent:-9999px;}
* html button{font-size:0;display:block;line-height:0} /* ie6 */
*+html button{font-size:0;display:block;line-height:0} /* ie7 */
回答by jsalwen
I had the opposite problem (worked in Internet Explorer, but not in Firefox). For Internet Explorer, you need to add left padding, and for Firefox, you need to add transparent color. So here is our combined solution for a 16px x 16px icon button:
我遇到了相反的问题（在 Internet Explorer 中工作，但不在 Firefox 中）。Internet Explorer 需要添加left padding，Firefox 需要添加透明色。所以这是我们针对 16px x 16px 图标按钮的组合解决方案：
input.iconButton
{
font-size: 1em;
color: transparent; /* Fix for Firefox */
border-style: none;
border-width: 0;
padding: 0 0 0 16px !important; /* Fix for Internet Explorer */
text-align: left;
width: 16px;
height: 16px;
line-height: 1 !important;
background: transparent url(../images/button.gif) no-repeat scroll 0 0;
overflow: hidden;
cursor: pointer;
}
回答by Stanislav Müller
well:
好：
font-size: 0;
line-height: 0;
font-size: 0;
line-height: 0;
work awesome for me!
为我工作真棒！
回答by Ryan Doherty
Have you tried setting the text-indent property to something like -999em? That's a good way to 'hide' text.
您是否尝试将 text-indent 属性设置为 -999em 之类的内容？这是“隐藏”文本的好方法。
Or you can set the font-size to 0, which would work too.
或者您可以将字体大小设置为 0，这也可以。
http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/
http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/
回答by msmithgu
The difference some of you are seeing in solutions that work or not in the different IEs may be due to having compatibility mode on or off. In IE8, text-indent works just fine unlesscompatibility mode is turned on. If compatibility mode is on, then font-size and line-height do the trick but can mess up Firefox's display.
你们中的一些人在不同 IE 中工作或不工作的解决方案中看到的差异可能是由于打开或关闭了兼容模式。在 IE8 中，除非打开兼容模式，否则文本缩进可以正常工作。如果兼容模式打开，则字体大小和行高可以解决问题，但可能会弄乱 Firefox 的显示。
So we can use a css hack to let firefox ignore our ie rule.. like so...
所以我们可以使用css hack让firefox忽略我们的ie规则......就像这样......
text-indent:-9999px;
*font-size: 0px; line-height: 0;
回答by Rob B
Use conditional statements at the top of the HTML document:
在 HTML 文档的顶部使用条件语句：
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Then in the CSS add
然后在CSS中添加
.ie7 button { font-size:0;display:block;line-height:0 }
Taken from HTML5 Boilerplate - more specifically paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
取自 HTML5 Boilerplate - 更具体地说paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
回答by FLOQ Design
I had this noted from somewhere:
我从某个地方注意到了这一点：
adding text-transform to input to remove it
将文本转换添加到输入以将其删除
input.button {
text-indent:-9999px;
text-transform:capitalize;
}
回答by FLOQ Design
Applying font-size: 0.1px;to the button works for me in Firefox, Internet Explorer 6, Internet Explorer 7, and Safari. None of the other solutions I've found worked across all of the browsers.
font-size: 0.1px;在 Firefox、Internet Explorer 6、Internet Explorer 7 和 Safari 中应用到按钮对我有用。我发现的其他解决方案都不适用于所有浏览器。
回答by povisenko
Write to your CSS file:
写入您的 CSS 文件：
#your_button_id
{
color: transparent;
}
