用于输入占位符的 HTML5 图像图标

I'd like to add an image icon to an input placeholder, like in this picture:

请注意，这是一个占位符，因此当用户开始键入时，该图标也会消失。

我为 webkit (Safari+Chrome) 提供了以下解决方案::-webkit-input-placeholder and ::before。不幸的是，直接应用到 mozilla 似乎不起作用。

所以我的问题是：是否有跨浏览器解决方案将图像图标添加到输入占位符？

webkit的解决方案：

#myinput::-webkit-input-placeholder::before { 
    content: ' ';
    position: absolute;
    top: 2px; /* adjust icon position */
    left: 0px;
    width: 14px; /* size of a single icon */
    height: 14px;
    background-image: url("/path/to/icons.png"); /* all icons in a single file */
    background-repeat: no-repeat;
    background-position: -48px 0px; /* position of the right icon */
}

1. 您可以将其设置为background-image并使用text-indent or a padding将文本向右移动。
2. 您可以将其分解为两个元素。

老实说，我会避免使用 HTML5/CSS3没有良好的后备。有太多人使用不支持所有新奇东西的旧浏览器。不幸的是，我们需要一段时间才能放弃后备:(

我提到的第一种方法是最安全、最简单的。这两种方式都需要 JavaScript 来隐藏图标。

CSS:

input#search {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    text-indent: 20px;
}

HTML:

<input type="text" id="search" name="search" onchange="hideIcon(this);" value="search" />

JavaScript：

function hideIcon(self) {
    self.style.backgroundImage = 'none';
}

2013 年 9 月 25 日

我不敢相信我说“这两种方式都需要 JavaScript 来隐藏图标。”，因为这并不完全正确。

正如此答案中所建议的，隐藏占位符文本的最常见时机是在更改时。然而，对于图标来说，可以将它们隐藏在焦点上，这可以在 CSS 中使用active伪类。

#search:active { background-image: none; }

哎呀，使用 CSS3 你可以让它消失！

http://jsfiddle.net/2tTxE/ http://jsfiddle.net/2tTxE/

2013 年 11 月 5 日

当然，还有 CSS3 ::before 伪元素。但要注意浏览器支持！

            Chrome  Firefox     IE      Opera   Safari
:before     (yes)   1.0         8.0     4       4.0
::before    (yes)   1.5         9.0     7       4.0

https://developer.mozilla.org/en-US/docs/Web/CSS/::之前 https://developer.mozilla.org/en-US/docs/Web/CSS/::before