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 style

但我会密切关注这一点，过去只能通过 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 回答