CSS Sprites: проблема с дизайном ввода (текстовое поле)

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 КБ). </p>

проблема в том, что я не могу получить тот же результат (только один флаг отображается одновременно) со спрайтами 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>

Снимки экрана (правильные и неправильные)

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

Answer 1

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

Answer 2

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