css - 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 sprite 图像（< 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>

截图（正确和错误）

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

Answer 1

问题是标志太紧了..将它们垂直展开一点，以便在上方和下方显示一些透明 - 即，使每个“标志”与文本输入框一样高

Answer 2

在制作旗帜精灵时，您可以增加旗帜顶部和底部的“空白空间”。