title: CSS Sprites: form input (text field) design problem
body: <p>I want a flag of country to appear in the text field.</p>
  
  <p>It works fine, when all icons are kept separately. For example:</p>
  
  <pre><code>#search input[type="text"] {
      background: #FFFFFF url(GB.png) no-repeat right center;
  }
  
  &lt;div id="search"&gt;
      To: &lt;input name="to" type="text" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, having more than 60 flags makes a lot of possible HTTP requests, so I put them into one vertical CSS sprite image (&lt; 25 KB).</p>
  
  <p>The problem is, that I can't get the same result (only one flag shown at once) with CSS sprites:</p>
  
  <pre><code>#search input[type="text"] {
      background: #FFFFFF url(countries.png) no-repeat right center;
  }
  .c-GB { background-position: 0 -368px;  } 
  
  &lt;div id="search"&gt;
      To: &lt;input name="to" type="text" class="c-GB" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://host.kernius.net/sprites/css-sprites-input-design.png" rel="nofollow noreferrer">Screenshoots (correct and wrong)</a></p>
  
  <p>If it's impossible, what other solutions would you suggest? The flag should change each time the user enters a different location.</p>