Looking to place different icons in front of items/options in a HTML select box.
+1
A:
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.
philjohn
2009-12-14 15:10:56
+3
A:
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.
BalusC
2009-12-14 15:11:40
+1... but I thought IE was supporting this now? (I'm not sure, though) I do know that IE supports changing the background color of options a little better than other browsers, so I guess I figured background-image would be supported. [shrug]
blesh
2009-12-14 16:08:56
My first instinct was the same, to use the CSS background-image property, however Safari 4.0, Opera 10, Chrome 3.0 and (of course) IE do not support this, while FF does. I also agree that a dhtml approach may be the best approach here, thank you for the links.
Reuben Peter-Paul
2009-12-14 17:52:24
test code..<select multiple> <option id="1" style="background-image:url('images/online.jpg');background-repeat:no-repeat;padding-left:21px;height:21px">Item 1</option> <option id="2">Item 2</option> </select>
Reuben Peter-Paul
2009-12-14 17:59:44