css - 你如何构建像::placeholder:before这样的东西

Question

考虑以下代码

<label>
   <input type="text" placeholder="cool placeholder"></input>
</label>

我想做的是在占位符之前放一张图片。当有人开始打字时，我希望图像和占位符消失。

  # when nothing is on input

  label: [img] | placeholder

  # when something is on input

  label: something in input|

我可以用占位符上的背景图片来做到这一点。

但是，问题是文本指示器 | 显示在图像前面。

有没有办法让文本指示器显示在背景图像之后，一旦占位符消失，它会再次出现在输入开始时？

纯 css 的答案将是最好的——在这种情况下更改 html 的结构将非常昂贵。

Answer 1

你可以使用:focus http://jsfiddle.net/qg0daxdb/

input {
    background: url(http://www.google.com/favicon.ico) center left no-repeat;
    background-size: 16px;
    text-indent: 20px;
}

input:focus {
    background: none;
    text-indent: 0;
}