Html SELECT 元素中的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1697996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image in SELECT element
提问by Franz
I know how to have pictures show up next to the options in a HTML dropdown form element using the CSS background-image property.
我知道如何使用 CSS background-image 属性在 HTML 下拉表单元素中的选项旁边显示图片。
However, the images do not show up on the selected element. Is there any way to do this (preferably using only CSS)?
但是，图像不会显示在所选元素上。有没有办法做到这一点（最好只使用 CSS）？
EDIT:
编辑：
Here is an example of the working code for the list elements. However, when the drop-down is closed, you only see the text of the selected element, without the image:
这是列表元素的工作代码示例。但是，当下拉列表关闭时，您只能看到所选元素的文本，而没有图像：
<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>
采纳答案by nicholaides
Doing this in a cross-browser way is going to be very challenging, and I suspect, impossible.
以跨浏览器的方式执行此操作将非常具有挑战性，我怀疑这是不可能的。
Instead, you might want to try using a widget that looks and acts like a select box, but is made w/ HTML & Javascript.
相反，您可能想尝试使用一个看起来和行为类似于选择框的小部件，但它是用 HTML 和 Javascript 制作的。
Here's one way to do it with jQuery:
这是使用 jQuery 执行此操作的一种方法：
回答by Gabriel Hurley
I agree with Nicholaides. Doing that strictly with HTML and CSS isn't going to work.
我同意尼古拉德的观点。严格使用 HTML 和 CSS 这样做是行不通的。
You'll want to use a progressive enhancement technique to place a regular select box on the page for users who don't use javascript or use screen readers and the like, then use javascript to replace the select box with your prettier, fancier widget.
您将需要使用渐进增强技术为不使用 javascript 或使用屏幕阅读器等的用户在页面上放置一个常规选择框，然后使用 javascript 将选择框替换为更漂亮、更高级的小部件。
