How to put an image/icon before select option text?

Looking to place different icons i开发者_如何学Pythonn front of items/options in a HTML select box.

---

In theory, you could make use of the CSS background-image property in the <option> element, but that doesn't work flawlessly in (cough) IE.

Best what you can do is to use jQuery/Javascript to mimic a dropdown with a bunch of <li> or <div> elements. As far no one comes to mind (I've never had the need for such a dropdown), but you can find here an overview of the "better" jQuery dropdown plugins, there must be one which suits your needs, for example this one.

---

The only way to do it would be to dynamically replace the select with a DHTML dropdown, the vanilla control doesn't have that capability. Using a DHTML dropdown has the benefit that it should degrade gracefully for those with javascript disabled.

You could do it quite simply with jQuery, have your normal <select>, grab it and replace with a hidden field, have your fancy DHTML dropdown with images (hidden positioned <div> with an unordered list could do it), attach to the onclick event of the items and make that update the hidden field with the selected value.