title: Text in my search box is covered by my search input background after clicking outside of it?
body: <p>If you type something in my search box and click outside of it before clicking the magnifying glass, the background in the input stays there when there is text inside of it. How can I hide the background when the input has text inside of it?</p>
  
  <p><strong>Here's the html:</strong></p>
  
  <pre><code>&lt;div id="searchwrap"&gt;
      &lt;li id="search"&gt;
          &lt;form id="search-form" name="search" action="/products" method="get"&gt;
              &lt;input id="search-input" name="search" type="text"&gt;
              &lt;input id="search-button" src="searchiconurl" name="submit" type="image"&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p><strong>Here's the CSS:</strong></p>
  
  <pre><code>input, textarea {
      padding: 0px 0px 0px 8px;
      width: 150px;
      border: none;
      height: 19px;
      border: 2px solid #f0f0f0;
      background: #ffffff;
      outline: none;
      background-image:url(BACKGROUND);
      background-repeat:no-repeat;
      background-position: 4px 4px;
  }
  
  input:focus, textarea:focus {
      border: 2px solid #333;
      -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .2);
      box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .2);
      outline: none;
      background-image:url(BACKGROUND);
      background-repeat:no-repeat;
      background-position:4px 4px;
  }
  </code></pre>