html - 如何向 `<option>` 列表中的 `<select>` 元素添加小缩略图？

Question

我正在尝试将小缩略图(20x20 像素)添加到 <option> <select> 中的元素列表，但我找不到可行的解决方案。

我搜索了 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>

出于某种原因，这不会加载缩略图。我确保测试了路径和缩略图确实存在(我在列表之前做了 <img src="/_assets/_img/thumbnail1.png"> 以检查图像是否已加载。

有什么想法可以实现吗？

Answer 1

尽管这里有其他答案，但您无法在所有浏览器中可靠地执行此操作。每个浏览器都显示一个 <select>领域完全不同。最好的办法是使用普通的 HTML 元素伪造一个选择字段，当它发生变化时，用 javascript 更新一个隐藏的选择字段。

请参阅此 SO 答案 putting images with options in a dropdown list