Question

我正在尝试将背景图片添加到下拉列表的选项中。

这是我正在使用的代码：

<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。如何让它在所有浏览器中运行？

Answer 1

可能不会为所有浏览器使用CSS。还发现了这个： HTML <select> selected option background-color CSS style

但是我会继续关注它，过去只能通过JS / Jquery来做...也许还有更好的方法。

欢呼声

Answer 2

我认为如果你尝试这个会很好。我知道这不是一个解决方案，但它可以做你想要的，只要想一想：

<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，这不是一件大事：）

将下拉选择选项的背景图像对齐到右侧

2 个答案: