Question

I am currently using a background image on my inputs to show a default value. When the input field is focused, the background disappears. However, Firefox auto-completes my fields with data if the user has chosen to save it and the default background image is still visible. How can I hide the background image when the field has been autocompleted by a browser?

Answer 1

There might be some crazy CSS selector that would allow you to do this, but you could use JavaScript to get rid of the background if there’s text in the input:

// on page load
if (yourInput.value) {
    yourInput.style.backgroundImage = '';
}

…Or whatever. Something similar.