我想在输入的占位符中添加图像图标，如下图所示：
请注意，这是占位符，所以当用户开始打字时，图标也会消失。
我使用:: – webkit-input-placeholder和:: before，为webkit(Safari Chrome)提供了以下解决方案。不幸的是，对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 */
}
解决方法
>您可以将其设置为背景图像，并使用文本缩进或填充将文本向右移动。
>你可以把它分解成两个元素。
>你可以把它分解成两个元素。
老实说，我会避免使用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中使用活动伪类的焦点上。
#search:active { background-image: none; }
哎，使用CSS3可以让它消失！
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
