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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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