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 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

製作標誌精靈時，可以增加標誌頂部和底部的'空白'。