html怎么帮图片占位,css – HTML5图像图标输入占位符

>您可以将其设置为背景图像，并使用文本缩进或填充将文本向右移动。

>你可以把它分解成两个元素。

老实说，我会避免使用HTML5 / CSS3，而没有好的回退。只有太多的人使用旧的浏览器，不支持所有新的花哨的东西。这将需要一段时间，我们可以放弃后备，不幸的是:(

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

CSS：

input#search {

background-image: url(bg.jpg);

background-repeat: no-repeat;

text-indent: 20px;

}

HTML：

使用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