CODEWITHSUNDEEP
cssfocushidebackground-image
H. Ferrence
H. Ferrence

Reputation: 8116

How to hide background image in input textbox when populated using CSS

I have effectively use the following css style:

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

It works great. But how do I continue to hide the background image when the textbox gets populated? I only want the background image to show when the textbox is blank.

I tried :valid: but that does not work the way I need it too.

Is this do-able in css or do I need to resort to javascript/jquery ?

Thanks.

Upvotes: 0

Views: 1033

Answers (1)

tribe84
tribe84

Reputation: 5622

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;
}

Upvotes: 2

Related Questions