4

テキストフィールドに国の旗を表示したい。

すべてのアイコンが別々に保持されている場合は、正常に機能します。例えば：

#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リクエストが発生する可能性があるため、それらを1つの垂直CSSスプライトイメージ（<25 KB）に配置しました。

問題は、CSSスプライトで同じ結果（一度に表示されるフラグは1つだけ）を取得できないことです。

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

スクリーンショット（正解と不正解）

それが不可能な場合、他にどのような解決策を提案しますか？フラグは、ユーザーが別の場所に入るたびに変更する必要があります。

4

2 に答える 2

2

旗のスプライトを作成するときに、旗の上部と下部の「空白」を増やすことができます。

于 2010-08-29T23:06:12.187 に答える
2

問題は、旗が密集しすぎていることです..旗を少し垂直に広げて、上下に透明なものが表示されるようにします。つまり、各「旗」をテキスト入力ボックスと同じ高さにします。

于 2010-08-29T23:09:47.553 に答える