CSS Sprites: form input (text field) design problem

Question

I want a flag of country to appear in the text field.

It works fine, when all icons are kept separately. For example:

#search input[type="text"] {
    background: #FFFFFF url(GB.png) no-repeat right center;
}

<div id="search">
    To: <input name="to" type="text" />
</div>

However, having more than 60 flags makes a lot of possible HTTP requests, so I put them into one vertical CSS sprite image (< 25 KB).

The problem is, that I can't get the same result (only one flag shown at once) with CSS sprites:

#search input[type="text"] {
    background: #FFFFFF url(countries.png) no-repeat right center;
}
.c-GB { background-position: 0 -368px;  } 

<div id="search">
    To: <input name="to" type="text" class="c-GB" />
</div>

Screenshoots (correct and wrong)

If it's impossible, what other solutions would you suggest? The flag should change each time the user enters a different location.

Answer 1

You could increase the 'blank space' at the top and bottom of your flags when making your flag sprite.

Answer 2

the problem is the flags are too tightly packed together .. spread them out a little vertically so that some transparent shows above and below - ie, make each 'flag' as tall as the text input box