Make input field background image disappear after text is inputted

Posted by aslum on Stack Overflow See other posts from Stack Overflow or by aslum
Published on 2010-04-28T20:22:09Z Indexed on 2010/04/28 20:27 UTC
Read the original article Hit count: 360

Filed under:
|
|
|

I'd like to make the background image for my input field disappear once the user has typed any amount of text in it. Is there a simple way to do that in javascript? I can get it so the bg disappears while the field is focused, but then it returns once they move on to the next field.

HTML:
Call me at <input name="phone" type="text" class="phone-field" id="phone">
CSS:

.form input {
  background-color:transparent;
}
.form input:focus {
  background-color:#edc;
  background-image:none;
}
input.phone-field {
  background-image: (url/images/phonebg.png);
  background-repeat: no-repeat;
  background-position: left 1px;
}

© Stack Overflow or respective owner

Related posts about html

Related posts about form