SELECT 元素中的图像 [重复]

Question

我知道如何使用 CSS background-image 属性在 HTML 下拉表单元素中的选项旁边显示图片。

但是，图像不会显示在所选元素上。有没有办法做到这一点（最好只使用 CSS）？

编辑：

这是列表元素的工作代码示例。但是，当关闭下拉菜单时，您只能看到所选元素的文本，而看不到图像：

<select name="form[location]">
    <option value="ad" style="background: url(img/flags/ad.gif) no-repeat; padding-left: 20px;">Andorra</option>
    <option value="ae" style="background: url(img/flags/ae.gif) no-repeat; padding-left: 20px;">United Arab Emirates</option>
    <option value="af" style="background: url(img/flags/af.gif) no-repeat; padding-left: 20px;">Afghanistan</option>
    <option value="ag" style="background: url(img/flags/ag.gif) no-repeat; padding-left: 20px;">Antigua and Barbuda</option>
    <option value="ai" style="background: url(img/flags/ai.gif) no-repeat; padding-left: 20px;">Anguilla</option>
    <option value="al" style="background: url(img/flags/al.gif) no-repeat; padding-left: 20px;">Albania</option>
    <option value="am" style="background: url(img/flags/am.gif) no-repeat; padding-left: 20px;">Armenia</option>
    <option value="an" style="background: url(img/flags/an.gif) no-repeat; padding-left: 20px;">Netherlands Antilles</option>
    <option value="ao" style="background: url(img/flags/ao.gif) no-repeat; padding-left: 20px;">Angola</option>
    <option value="ar" style="background: url(img/flags/ar.gif) no-repeat; padding-left: 20px;" selected="selected">Argentina</option>

    [...] - I think you get the idea.

</select>

Answer 1

以跨浏览器的方式执行此操作将非常具有挑战性，我怀疑是不可能的。

相反，您可能想尝试使用外观和行为类似于选择框，但使用 HTML 和 Javascript 制作的小部件。

这是使用 jQuery 的一种方法：

jquery.combobox

Answer 2

我同意尼古拉德斯的观点。严格使用 HTML 和 CSS 是行不通的。

您将希望使用渐进增强技术在页面上为不使用 javascript 或使用屏幕阅读器等的用户放置一个常规选择框，然后使用 javascript 将选择框替换为您的更漂亮，更漂亮的小部件。