如何在“< select>"列表中的“< option>"元素上添加小缩略图? [英] How to add small thumbnails to `<option>` elements in a `<select>` list?

问题描述

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

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.

我搜索了SO和Google，并找到了以下示例:

I searched SO and Google and found the following example:

<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">来检查图像是否已加载.

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.

有什么想法可以做到这一点吗?

Any ideas how to accomplish this?

推荐答案

尽管这里有其他答案，但您将无法在所有浏览器中可靠地执行此操作.每个浏览器显示的<select>字段完全不同.最好的选择是使用常规HTML元素伪造选择字段，并在更改时使用javascript更新隐藏的选择字段.

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>"列表中的“< option>"元素上添加小缩略图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！