How to use icons in a drop-down list?

Question

I have researching this for a while but can't see how to do this.

Basically I am trying to use icons in a drop-down list, e.g.:

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

This drop-down is part of form inside a table which is used to search a database and return the results.

Any help would be much appreciated.

Regards, Martin

Answer 1

Short answer: You can´t.

If you want to use icons in a drop-down, you will have to make a 'fake' drop-down menu using for example an unordered list and use javascript to copy the clicked value to your (hidden...) form field.

Answer 2

It's possible in Firefox, because it lets you define a background-image for option elements in CSS. AFAIK only Firefox allows this though.

You could use a jQuery plugin. A Google search gave me this plugin for example.

Answer 3

This is not possible using regular HTML and CSS. The DTD does not allow it.