使用CSS填充时如何在输入文本框中隐藏背景图像

Question

我有效地使用了以下css样式：

input.my-text:focus { background-image: none; }

效果很好。但是如何在填充文本框时继续隐藏背景图像？我只希望文本框空白时显示背景图片。

我尝试了:valid:，但这并不是我需要的方式。

这可以在css中执行，还是需要使用javascript / jquery？

感谢。

Answer 1

How about "hacking" the placeholder functionality.

http://jsfiddle.net/f01g6spe/1/

input{
    position: relative;
}

input::-webkit-input-placeholder{
    background: pink;
    display: block
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}