CSS隐藏INPUT BUTTON值文本

StackOverflow https://stackoverflow.com/questions/600438

题

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

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

我希望按钮显示为图像，但我不希望value文本显示在它上面。这对Firefox的预期效果很好。但是，在Internet Explorer 6和Internet Explorer 7上，我仍然可以看到该文本。

我尝试过各种各样的技巧来隐藏文字，但没有成功。是否有使Internet Explorer运行的解决方案？

（我被限制使用type=button因为这是一个Drupal表单，其表单API不支持图像类型。）

有帮助吗？

解决方案

为什么要包含value属性？从内存中，您不需要指定它（虽然HTML标准可能会说你做 - 不确定）。如果确实需要value=""属性，为什么不只是陈述<=>？

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

其他提示

我用

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 */

我遇到了相反的问题（在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;
}

以及：

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

对我来说很棒！

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

或者你可以将font-size设置为0，这也可以。

http://www.productivedreams.com /即 - 不intepreting-文本缩进上提交-按钮/

有些人在不同的IE中工作与否的解决方案中看到的差异可能是由于打开或关闭兼容模式。在IE8中，text-indent工作正常，除非兼容模式已打开。如果打开了兼容模式，那么font-size和line-height可以解决这个问题，但可能会搞乱Firefox的显示。

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

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

在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 /条件的样式表-VS-CSS-黑客应答-既不/

我从某个地方注意到了这一点：

将text-transform添加到输入以将其删除

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

写入您的CSS文件：

#your_button_id 
    {
        color: transparent;
    }

将font-size: 0.1px;应用于该按钮适用于Firefox，Internet Explorer 6，Internet Explorer 7和Safari。我发现其他解决方案都不适用于所有浏览器。

overflow:hidden和padding-left对我来说很好。

对于Firefox：

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

对于IE：

padding-left:1000px;

适用于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;

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

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

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

font-size:999px

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

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

以下内容最适合我：

<强> 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;
}

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

<强> CSS： 

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

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

相反，只需执行hook_form_alter并使按钮成为图像按钮即可完成！

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

例如：

color: transparent;
text-transform: uppercase;
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top