Hiding default input background image in firefox when the input is auto completed

I am currently using a background image on my inputs to show a default value. When the input field is focused, the backgro开发者_如何转开发und 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?

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.

You can turn autocomplete off either on the whole form or on a specific input:

<form autocomplete="off"></form>
<input type="text" autocomplete="off" />

If you want to add a listener to this event, Firefox 4+ will fire an "oninput" event when autocompleted.