Grow your CSS skills. Land your dream job.

Last updated on:

Input with Disappearing Background Image

This replicates the functionality of the standard embeddable Google Search fields. They have an image in the background and when the input is clicked into, the image disappears.

<form name="searchform" id="search-form">
   <div>
       <b>Search</b>
       <input type="text" name="txtInput" title="Enter the terms you wish to search for." />
       <input type="submit" value="GO!" class="submit" style="cursor: pointer;" />
   </div>
</form>

JavaScript underneath form markup:

<script type="text/javascript" language="javascript">
 (function() {
    var id = document.getElementById('search-form');
    if (id && id.txtInput) {
      var name = id.txtInput;
      var unclicked = function() {
          if (name.value == '') {
              name.style.background = '#FFFFFF url(images/googbg.png) left no-repeat';
          }
       };
       var clicked = function() {
          name.style.background = '#ffffff';
       };
    name.onfocus = clicked;
    name.onblur = unclicked;
    unclicked();
    }
  })();
</script>

View Demo

Comments

  1. Permalink to comment#

    Exactly what I was looking for. Thanks.

  2. thats actually nice

    i like it better than default text in the box :- )

    thanks

  3. James
    Permalink to comment#

    I have a problem with making this work with a login form.

    If the user returns to the login page, their username and password will be automatically filled in for them. Unfortunately, the script isn’t recognizing this, so their credentials end up being displayed over the unclicked background-image.

    Any idea how to remedy this?

  4. unomyname

    James, you asked EXACTLY the question that I am struggling with.
    Did you find a solution?

  5. Permalink to comment#

    I have the same problem as James

  6. Zabi
    Permalink to comment#

    When index page is opened, it should display three images and disappear in 10 to 15 seconds. Please help me.

  7. Adswaine

    Thank you!
    A simple solution to a common problem.

    Much appreciated!

  8. how i can change position image to center?

  9. Mike
    Permalink to comment#

    Thanks! It’s great :)

  10. Lashchevsky
    Permalink to comment#

    Why not?
    Only CSS.

    input {background: url('img.jpg');}
    input:focus {background: none;}
    
    • Lashchevsky, thank you! That worked perfectly. I added a red border and color background to highlight the field. Looks great!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".