CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Reuben Peter-Paul
Reuben Peter-Paul

Reputation: 1580

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

Looking to place different icons in front of items/options in a HTML select box.

Upvotes: 2

Views: 15851

Answers (2)

philjohn
philjohn

Reputation: 546

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.

Upvotes: 2

BalusC
BalusC

Reputation: 1108682

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.

Upvotes: 5

Related Questions