如何使用下拉列表中的图标？ [复制]

Posted 2023-02-24

【中文标题】如何使用下拉列表中的图标？ [复制]

【英文标题】：How to use icons in a drop-down list? [duplicate]

【发布时间】：2011-07-18 05:04:43

【问题描述】：

我已经研究了一段时间，但不知道该怎么做。

基本上我正在尝试在下拉列表中使用图标，例如：

<form method="get" action="testdocs-db.php" name="search" id="search" class="search">
<input type="hidden" name="dosearch" value="true">
<table width=600 border=0>
<tr>
<td>File Type:</td>
<td>
<select name="filetype" size="1" > 
<option selected>any</option> 
<option id="text">text</option> 
<option id="msword">msword</option> 
<option id="excel">excel</option> 
<option id="powerpoint">powerpoint</option> 
<option id="pdf">pdf</option> 
<option id="jpeg">jpeg</option> 
<option id="png">png</option> 
<option id="bmp">bmp</option> 
<option id="gif">gif</option> 
</select> 
</td>
</tr>
</table>

此下拉列表是表格内的一部分，用于搜索数据库并返回结果。

任何帮助将不胜感激。

问候， 马丁

【参考方案1】：

简短的回答：你不能。

如果您想在下拉菜单中使用图标，则必须使用例如无序列表制作“假”下拉菜单，并使用 javascript 将点击的值复制到您的（隐藏...）表单域。

【参考方案2】：

这在使用常规 html 和 CSS 时是不可能的。 DTD 不允许这样做。

【参考方案3】：

这在 Firefox 中是可能的，因为它允许您在 CSS 中为 option 元素定义 background-image。不过，AFAIK 只有 Firefox 允许这样做。

您可以使用 jQuery 插件。谷歌搜索给了我this plugin for example。

【讨论】：

是的，终于可以使用它了，感谢您的帮助。