title: Doing a input type="text" with CSS3 and fixed image on the background
body: <p>I am developing my first HTML5 / CSS3 website and I want to do all I can correctly and with well methods and being usable too.</p>
  
  <p>I have to reproduce the next search input in this website:</p>
  
  <p><img src="https://i.stack.imgur.com/SUwdV.jpg" alt="Search Box"></p>
  
  <p>What I don't know how to do it is to implement the background of the image, or if the image needs to be a <code>&lt;input type="image" /&gt;</code>.</p>
  
  <p>At the moment, what I've is the next:</p>
  
  <pre><code>#header-search input {
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      border:1px solid #8e8e8e;
      background-color:#f5f5f5;
      height:16px;
      padding:4px;
      color:#4a4a4a
  }
  </code></pre>
  
  <p>This creates an input with the same radius and all the area is input text. There is no space for the magnifying glass and if it was a background the image can not be clicked. In this point, what is best? Let the input only triggered by  or... how will you do it?</p>
  
  <p>Anyway you will do it, please tell me.</p>
  
  <p>Thank you in advance!</p>