如何在IE7中定位输入值并删除文本

Question

我有一个提交按钮的input字段：

<input id="searchSubmit" type="submit" value="Search" />

在CSS中，我在按钮上放置了一个背景图像，看起来像是放大镜，而不是默认按钮。

这适用于大多数浏览器，但我遇到IE 7问题，而value文字显示在图像的顶部。

是否有一种简单的方法可以删除此文本而不将其从value元素的input字段中删除？有什么影响：

#searchSubmit input[type="submit"][value=Search] {
    text-indent:-999em !important;
}

有什么想法吗？

Answer 1

只需将这个简单但优雅的解决方法添加到您的CSS中。

  

单独使用Negative-indent无法从IE7中的按钮元素中删除文本，但添加了text-transform：capitalize;和presto！

#searchSubmit {
     text-indent: -9000px;
     text-transform: capitalize;
}

来源：http://css-tricks.com/snippets/css/remove-button-text-in-ie7/

Answer 2

将字体大小设置为ZERO。 * 前缀将定位到IE7（和六个）。

#searchSubmit  {
    *font-size:0;
    *width:50px;
    *height:22px;
}​

您需要为此指定宽度和高度，因为按钮的大小取决于文本。

同样在CSS中，如果某个项目有ID，则不需要任何辅助选择器：

#searchSubmit {...}

不

#searchSubmit input[type="submit"][value=Search] {...}