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 KB）。

问题是，我无法通过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>

截图（正确和错误）

如果不可能，你会建议哪些其他解决方案？每当用户进入不同的位置时，标志应更改。

- krn

Answer 1

在制作国旗精灵图时，你可以增加顶部和底部的“空白区域”。

- Michael Robinson

Answer 2

问题在于旗帜被紧密地挤在一起..垂直地扩散它们一点，以便一些透明的部分显示在上方和下方——也就是说，让每个“旗帜”与文本输入框一样高。

- Scott Evernden