CSS 隐藏 INPUT BUTTON 值文本

Posted 2023-02-15

技术标签:

【中文标题】CSS 隐藏 INPUT BUTTON 值文本【英文标题】：CSS to hide INPUT BUTTON value text 【发布时间】：2010-10-10 16:04:02 【问题描述】：

我目前正在使用以下 CSS 设置 <input type='button'/> 元素的样式：

background: transparent url(someimage);
color: transparent;

我希望按钮显示为图像，但我不希望 value 文本显示在其顶部。正如预期的那样，这适用于 Firefox。但是，在 Internet Explorer 6 和 Internet Explorer 7 上，我仍然可以看到文本。

我尝试了各种技巧来隐藏文本，但都没有成功。是否有使 Internet Explorer 正常运行的解决方案？

（我只能使用type=button，因为这是一个 Drupal 表单，它的表单 API 不支持图像类型。）

【问题讨论】：

我遇到了同样的问题并尝试了所有 11 个答案，发现这些黑客（text-indent 和 padding-left）只能修复具有 type="submit" 的输入，所以我有从type="image" 更改。总之谢谢 【参考方案1】：

在 Firefox、Internet Explorer 6、Internet Explorer 7 和 Safari 中对按钮应用 font-size: 0.1px; 对我有效。我发现的其他解决方案均不适用于所有浏览器。

【讨论】：

【参考方案2】：

你们中的一些人在不同的 IE 中工作或不工作的解决方案中看到的差异可能是由于打开或关闭了兼容模式。在 IE8 中，文本缩进工作得很好除非兼容模式打开。如果打开兼容模式，则 font-size 和 line-height 可以解决问题，但会弄乱 Firefox 的显示。

所以我们可以使用 css hack 让 firefox 忽略我们的 ie 规则......就像这样......

text-indent:-9999px;
*font-size: 0px; line-height: 0;

【讨论】：

【参考方案3】：

相反，只需执行 hook_form_alter 并将按钮设置为图像按钮即可！

【讨论】：

【参考方案4】：

以下内容对我来说效果最好：

HTML：

<input type="submit"/>

CSS：

input[type=submit] 
    background: url(http://yourURLhere) no-repeat;
    border: 0;
    display: block;
    font-size:0;
    height: 38px;
    width: 171px;

如果您没有在<input type="submit"/> 上设置value，它将在您的按钮中放置默认文本“提交”。所以，只需在提交时设置font-size: 0;，然后确保为输入类型设置height 和width，以便显示图像。如果需要，请不要忘记提交的媒体查询，例如：

CSS：

@media (min-width:600px) 
  input[type=submit] 
    width:200px;
    height: 44px;

这意味着当屏幕宽度正好为 600 像素或更大时，按钮将改变其尺寸

【讨论】：

【参考方案5】：

color:transparent;  /* For FF */
*padding-left:1000px ;  /* FOR IE6,IE7 */

【讨论】：

【参考方案6】：

color:transparent; 然后任何 text-transform 属性也可以解决问题。

例如：

color: transparent;
text-transform: uppercase;

【讨论】：

【参考方案7】：

我遇到了同样的问题。正如许多其他帖子所报道的那样：填充技巧仅适用于 IE。

font-size:0px 仍然显示一些小点。

唯一对我有用的是做相反的事情

font-size:999px

...但我只有 25x25 像素的按钮。

【讨论】：

【参考方案8】：

写入您的 CSS 文件：

#your_button_id 
    
        color: transparent;

【讨论】：

【参考方案9】：

我从某处注意到了这一点：

将文本转换添加到输入以将其删除

input.button 
    text-indent:-9999px;
    text-transform:capitalize;

【讨论】：

大写有什么用？我现在不会尝试，但其余的似乎是个好主意。 @Bomboca 出于某种原因，如果没有利用我们心爱的 IE7，它就无法工作 @grim，我怎么没想到呢？谢谢;)【参考方案10】：

在 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]-->

然后在CSS中添加

.ie7 button  font-size:0;display:block;line-height:0

取自 HTML5 Boilerplate - 更具体地说是paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

【讨论】：

【参考方案11】：

我遇到了相反的问题（在 Internet Explorer 中工作，但在 Firefox 中没有）。对于 Internet Explorer，您需要添加左填充，对于 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;

【讨论】：

【参考方案12】：

这适用于 Firefox 3、Internet Explorer 8、Internet Explorer 8 兼容模式、Opera 和 Safari。

*注意：包含这个的表格单元格有padding:0 和text-align:center。

background: none;
background-image: url(../images/image.gif);
background-repeat:no-repeat;
overflow:hidden;
border: NONE;
width: 41px; /*width of image*/
height: 19px; /*height of image*/
font-size: 0;
padding: 0 0 0 41px;
cursor:pointer;

【讨论】：

【参考方案13】：

overflow:hidden 和 padding-left 对我来说工作正常。

对于火狐：

width:12px;
height:20px;
background-image:url(images/arrow.gif);
color:transparent;
overflow:hidden;
border:0;

对于 IE：

padding-left:1000px;

【讨论】：

【参考方案14】：

我用

button text-indent:-9999px;
* html buttonfont-size:0;display:block;line-height:0  /* ie6 */
*+html buttonfont-size:0;display:block;line-height:0  /* ie7 */

【讨论】：

【参考方案15】：

好吧：

font-size: 0; line-height: 0;

为我工作真棒！

【讨论】：

不错的一个！对于 IE，这似乎是破坏性最小的解决方法。 haaaa duh 我怎么没想到。【参考方案16】：

您是否尝试过将 text-indent 属性设置为 -999em 之类的？这是“隐藏”文本的好方法。

或者您可以将字体大小设置为 0，这也可以。

http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/

【讨论】：

是的，我试过了，按钮消失了.. font-size = 0 仍然显示一个点文本缩进在 IE 7 及更早版本中不起作用 - 整个按钮缩进，而不仅仅是文本我遇到了font-size: 0按钮中间的点的问题，诀窍是也添加line-height: 0。【参考方案17】：

为什么要包含value 属性？从记忆中，您不需要指定它（尽管 HTML 标准可能会说您这样做 - 不确定）。如果您确实需要 value 属性，为什么不直接声明 value=""？

如果您采用这种方法，您的 CSS 将需要额外的背景图像高度和宽度属性。

【讨论】：

应该注意的是，这使得按钮对于视障用户完全无用。这实际上是一个非常有效的观点。您可以通过向按钮添加标题和 alt 属性来解决此问题，不是吗？这对于可访问性来说非常糟糕。您应该考虑将另一个答案标记为正确。在 MVC 模式中也需要自动将按钮的值带入控制器。如果在同一个表单上有一个“提交”和“取消”按钮，那么按钮的值可以用来确定哪个按钮被实际点击了。我同意这对可访问性不利，值得注意的是您应该谨慎使用它，但这不是问题的一部分。这个答案有效地解决了这个问题。我敢打赌，这里讨论的大多数网站甚至都没有针对其他语言进行适当的国际化，更不用说考虑到视障人士的屏幕阅读器了。 ;)

以上是关于CSS 隐藏 INPUT BUTTON 值文本的主要内容，如果未能解决你的问题，请参考以下文章

表单学习心得

css：隐藏input file标签并触发点击上传文件事件

input file 修改按钮名称

IE7按钮值

自定义上传按钮 <input type="file" name = "file"/> (将file隐藏在button下)

Html-Input标签