Html 如何向`<select>` 列表中的`<option>` 元素添加小缩略图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31697386/
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
How to add small thumbnails to `<option>` elements in a `<select>` list?
提问by bodacydo
I'm trying to add small thumbnail images (20x20 pixels) to <option>elements in a <select>list but I'm unable to find a working solution.
我正在尝试向列表中的<option>元素添加小缩略图（20x20 像素），<select>但我找不到可行的解决方案。
I searched SO and Google and found the following example:
我搜索了 SO 和 Google 并找到了以下示例：
<select>
<option style="background-image:url(/_assets/_img/thumbnail1.png)">Item 1</option>
<option style="background-image:url(/_assets/_img/thumbnail2.png)">Item 2</option>
</select>
For some reason this doesn't load thumbnails. I made sure to test the paths and the thumbnails do exist (I did a <img src="/_assets/_img/thumbnail1.png">before the list to check that images get loaded.
出于某种原因，这不会加载缩略图。我确保测试路径并且缩略图确实存在（我<img src="/_assets/_img/thumbnail1.png">在列表之前做了一个检查图像是否被加载。
Any ideas how to accomplish this?
任何想法如何实现这一点？
采纳答案by tombeynon
Despite the other answers here, you won't be able to do this reliably in all browsers. Each browser presents a <select>field completely differently. Your best bet is to fake a select field using normal HTML elements, and when it changes, update a hidden select field with javascript.
尽管这里有其他答案，但您无法在所有浏览器中可靠地做到这一点。每个浏览器都以<select>完全不同的方式呈现一个字段。最好的办法是使用普通的 HTML 元素伪造一个选择字段，当它发生变化时，用 javascript 更新隐藏的选择字段。
See this SO answer putting images with options in a dropdown list
请参阅此 SO 答案， 将带有选项的图像放在下拉列表中
