CSS Sprites：表单输入（文本字段）设计问题
我希望文本字段中出现国旗。
当所有图标单独保存时，它工作得很好。例如：
#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 sprites 获得相同的结果（一次只显示一个标志）：
#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>
如果不可能，您会建议其他什么解决方案？每次用户进入不同的位置时，该标志都应该改变。
I want a flag of country to appear in the text field.
It works fine, when all icons are kept separately. For example:
#search input[type="text"] {
background: #FFFFFF url(GB.png) no-repeat right center;
}
<div id="search">
To: <input name="to" type="text" />
</div>
However, having more than 60 flags makes a lot of possible HTTP requests, so I put them into one vertical CSS sprite image (< 25 KB).
The problem is, that I can't get the same result (only one flag shown at once) with CSS sprites:
#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)
If it's impossible, what other solutions would you suggest? The flag should change each time the user enters a different location.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
问题是标志太紧密地堆积在一起..将它们垂直地展开一点，以便在上面和下面显示一些透明的内容 - 即，使每个“标志”与文本输入框一样高
the problem is the flags are too tightly packed together .. spread them out a little vertically so that some transparent shows above and below - ie, make each 'flag' as tall as the text input box
在制作旗帜精灵时，您可以增加旗帜顶部和底部的“空白空间”。
You could increase the 'blank space' at the top and bottom of your flags when making your flag sprite.