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. User Avatar
    iSpy
    Permalink to comment#

    Exactly what I was looking for. Thanks.

  2. User Avatar
    Artur Ejsmont
    Permalink to comment#

    thats actually nice

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

    thanks

  3. User Avatar
    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. User Avatar
    unomyname

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

  5. User Avatar
    Glumbo
    Permalink to comment#

    I have the same problem as James

  6. User Avatar
    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. User Avatar
    Adswaine

    Thank you!
    A simple solution to a common problem.

    Much appreciated!

  8. User Avatar
    wongsimpang.com
    Permalink to comment#

    how i can change position image to center?

  9. User Avatar
    Mike
    Permalink to comment#

    Thanks! It’s great :)

  10. User Avatar
    Lashchevsky
    Permalink to comment#

    Why not?
    Only CSS.

    input {background: url('img.jpg');}
    input:focus {background: none;}
    
    • User Avatar
      ChecMark

      Lashchevsky, thank you! That worked perfectly. I added a red border and color background to highlight the field. Looks great!

  11. User Avatar
    PaulRevival
    Permalink to comment#

    Lashchevsky, +1! No js – css only..

    Either background image on input like

    input { background: #fff url("img.png"); }
    input:focus { background: none; }
    

    or wrap input with div {position:relative} and place a real ‘img’ inside like that:

    <div class="wrap">
      <input>
      <div class="img-box">
        <img>
      </div>
    </div>
    
    .wrap {
      position: relative;
      display: inline-block;
      vertical-align: top;
    }
    .img-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 100%;
    }
    input {
      position: relative;
      z-index: 2;
    }
    input:focus + .img-box {
      opacity: 0;
    }
    

    Enjoy some jsFiddle http://jsfiddle.net/y38n947h/

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag