CSS-спрайты: проблема ввода формы (текстовое поле)

Question

Я хочу, чтобы в текстовом поле появился флаг страны.

Это прекрасно работает, когда все значки хранятся отдельно. Например:

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

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

Однако, имея более чем 60 флагов делает много возможных запросов HTTP, так что я положил их в один вертикальный CSS спрайтов изображения (< 25 КБ).

Проблема заключается в том, что я не могу получить тот же результат (только один флаг показан сразу) с CSS спрайтов:

#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)

Если это невозможно, то, что другие решения вы бы предлагать? Флаг должен меняться каждый раз, когда пользователь входит в другое место.

Answer 1

проблема заключается в том, что флаги слишком плотно упакованы вместе. Разверните их немного вертикально, чтобы некоторые прозрачные показания сверху и снизу - то есть, чтобы каждый «флаг» был таким же высоким, как поле ввода текста

Answer 2

Вы можете увеличить «пустое место» в верхней и нижней частях флагов при создании спрайта с флагом.