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>

Screenshoots (correct and wrong)

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

Answer 1

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

Answer 2

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

CSS Sprites：表单输入（文本字段）设计问题

2 个答案: