¿Cómo usar iconos en una lista desplegable?

Question

Investigo esto por un tiempo pero no puedo ver cómo hacerlo.

Básicamente estoy tratando de usar iconos en una lista desplegable, por ejemplo .:

<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> 

Este desplegable es parte de la forma dentro de una tabla que se utiliza para buscar una base de datos y devolver los resultados.

Cualquier ayuda sería muy apreciada.

Saludos, Martin

Answer 1

Respuesta corta: no puedes.

Si desea utilizar los iconos en un menú desplegable, tendrá que hacer un menú desplegable 'falso' utilizando, por ejemplo, una lista desordenada y usar javascript para copiar el valor cliqueado a su ...) campo de formulario.

Answer 2

Esto no es posible con HTML y CSS regulares. La DTD no lo permite.

Answer 3

Es posible en Firefox, porque le permite definir un background-image para option elementos en CSS. AFAIK solo Firefox lo permite.

Puede usar un plugin jQuery. Una búsqueda en Google me dio this plugin for example.