0

ドロップダウンの選択オプションに背景画像を追加しようとしています。

これは私が使用しているコードです:

<html>
<head>
<style>

    .flag16
    {   
        height:16px;
        width:16px;
        background:url(http://imgur.com/l2KaB.png) no-repeat;
    }

    .flag16.us{background-position:0 -3664px;}
    .flag16.il{background-position:0 -1824px;}
    .flag16.in{background-position:0 -1856px;}
    .flag16.it{background-position:0 -1920px;}

</style>
</head>
<body>

    <select id="my_select" style="width: 180px;height:20px;">
    <option value="some Value 1" class="flag16 us">USA</option>
    <option value="some Value 2" class="flag16 il">Israel</option>
    <option value="some Value 3" class="flag16 in">India</option>
    <option value="some Value 4" class="flag16 it">Italy</option>
    </select>

</body>
</html>

JSFiddle はこちら: http://jsfiddle.net/26Wgq/4/

すべての画像を右揃えにするにはどうすればよいですか?

また、このスニペットは Firefox でのみ機能します。すべてのブラウザで動作させるにはどうすればよいですか?

4

2 に答える 2

0

おそらく、すべてのブラウザで CSS を使用できるわけではありません。これも見つかりました: HTML <select> selected option background-color CSS スタイル

しかし、私はそれに注意を払います.以前はJS/Jqueryのみで行っていました...もっと良い方法があるかもしれません.

乾杯

于 2012-10-26T07:57:52.637 に答える
0

これを試してみると良いと思います。私はこれが解決策ではないことを知っていますが、それはあなたが望むことをすることができます.これについて考えてみてください:

<select id="my_select" style="width: 180px;height:20px;">
    <option value="some Value 1" class="flag16 us">USA<span class="as"><img src="usa.jpg" /></span></option>
    <option value="some Value 2" class="flag16 il">Israel<span class="as"><img src="Israel.jpg" /></span></option>
    <option value="some Value 3" class="flag16 in">India<span class="as"><img src="India.jpg" /></span></option>
    <option value="some Value 4" class="flag16 it">Italy<span class="as"><img src="Italy.jpg" /></span></option>
</select>

画像のcssを作成するだけで、それほど大きなことではありません:)

于 2012-10-26T08:00:30.993 に答える