CSS隐藏INPUT BUTTON值文本

Question

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

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

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

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

(我被限制使用,type=button因为这是一个Drupal形式,它的表单API不支持图像类型.)

Answer 1

我用

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

Answer 2

我有相反的问题(在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;
}

Answer 3

好:

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

为我工作真棒!

Answer 4

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

或者您可以将font-size设置为0,这也可以.

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

Answer 5

你为什么要包括这个value属性？从内存中,您不需要指定它(虽然HTML标准可能会说你做 - 不确定).如果你确实需要一个value属性,为什么不只是说明value=""？

如果您采用这种方法,您的CSS将需要背景图像的高度和宽度的其他属性.