【问题标题】:How to add small thumbnails to `<option>` elements in a `<select>` list?如何向`<select>`列表中的`<option>`元素添加小缩略图?
【发布时间】:2015-07-29 18:21:47
【问题描述】:

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

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

由于某种原因,它不会加载缩略图。我确保测试了路径并且缩略图确实存在(我在列表之前做了&lt;img src="/_assets/_img/thumbnail1.png"&gt; 以检查图像是否已加载。

任何想法如何做到这一点?

【问题讨论】:

标签: html css


【解决方案1】:

尽管此处有其他答案,但您无法在所有浏览器中可靠地执行此操作。每个浏览器都以完全不同的方式呈现&lt;select&gt; 字段。最好的办法是使用普通的 HTML 元素伪造一个选择字段,当它发生变化时,用 javascript 更新一个隐藏的选择字段。

看到这个答案 putting images with options in a dropdown list

【讨论】:

  • 有一个 jQuery 插件,比较简单designwithpc.com/Plugins/ddSlick
  • 很好的例子。这已经做了数百次了,OP应该使用插件而不是重新发明轮子。
  • 但是,我只想要这个功能,所以一个插件是主要的矫枉过正
  • 一些插件可能是“严重的过度杀伤力”,但使用插件本身并不是过度杀伤力。在这种情况下,OP 可能会重新创建 HTML
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-03-27
  • 1970-01-01
  • 2019-12-24
  • 2021-03-21
  • 2016-09-29
  • 1970-01-01
  • 2011-07-21
相关资源
最近更新 更多