title: CSS: Implementing CSS Sprites with input button image
body: <p>This button is before CSS Sprites</p>
  
  <pre><code>&lt;input type="image" src="/images/search-button.png" value="" id="search-button"&gt;
  </code></pre>
  
  <p>I'm trying to implement CSS Sprites with one of my search form and the problem is that if I use </p>
  
  <pre><code>&lt;input id="search-button" class="sprites1" type="submit" value=""&gt;
  </code></pre>
  
  <p>it will look something like this.</p>
  
  <p><img src="https://i.stack.imgur.com/aaUCN.png" alt="enter image description here"></p>
  
  <p>As you can see the image on the right doesn't look right, but it is click-able.</p>
  
  <p>Then I tried with </p>
  
  <pre><code>&lt;span id="search-button" class="sprites1"&gt;&lt;/span&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/dIpo9.png" alt="enter image description here"></p>
  
  <p>Then it looks right! But!! I can't click on it.</p>
  
  <p>So here is my CSS sprites code.</p>
  
  <p>What I have to implement to get it look the one I want and I can click on it?</p>
  
  <pre><code> .sprites1 {
          background: url('result.png');
      }
  #search-button {background-position: -0px -462px; 
  
                  width:16px; height:16px; float:right; }
  </code></pre>