如何在选择选项文本之前放置图像/图标？答案

【问题标题】：How to put an image/icon before select option text?如何在选择选项文本之前放置图像/图标？
【发布时间】：2009-12-14 15:02:56
【问题描述】：

希望在 HTML 选择框中的项目/选项前面放置不同的图标。

【问题讨论】：

【解决方案1】：

理论上，您可以在 <option> 元素中使用 CSS background-image 属性，但这在 (cough) IE 中无法完美运行。

您能做的最好的事情是使用 jQuery/Javascript 来模拟带有一堆 <li> 或 <div> 元素的下拉菜单。到目前为止没有人想到（我从来没有需要这样的下拉菜单），但是您可以找到here“更好” jQuery 下拉插件的概述，必须有一个适合您的需求，例如this one.

【讨论】：

+1... 但我认为 IE 现在支持这个？（不过我不确定）我知道 IE 支持更改选项的背景颜色比其他浏览器好一点，所以我想我认为 background-image 会被支持。 [耸肩]
我的第一直觉是一样的，使用 CSS background-image 属性，但是 Safari 4.0、Opera 10、Chrome 3.0 和（当然）IE 不支持这个，而 FF 支持。我也同意 dhtml 方法可能是这里最好的方法，谢谢你的链接。
测试代码..

【解决方案2】：

唯一的方法是用 DHTML 下拉菜单动态替换 select，vanilla 控件没有这种功能。使用 DHTML 下拉菜单的好处是，对于禁用 javascript 的用户，它应该可以优雅地降级。

你可以用 jQuery 很简单地做到这一点，用你的普通

【讨论】：