How to add small thumbnails to `<option>` elements in a `<select>` list?
Despite the other answers here, you won't be able to do this reliably in all browsers. Each browser presents a <select>
field completely differently. Your best bet is to fake a select field using normal HTML elements, and when it changes, update a hidden select field with javascript.
See this SO answer putting images with options in a dropdown list
bodacydo
My name is Boda Cydo. I am from Africa but now live in Washington DC.
Updated on July 09, 2022Comments
-
bodacydo over 1 year
I'm trying to add small thumbnail images (20x20 pixels) to
<option>
elements in a<select>
list but I'm unable to find a working solution.I searched SO and Google and found the following example:
<select> <option style="background-image:url(/_assets/_img/thumbnail1.png)">Item 1</option> <option style="background-image:url(/_assets/_img/thumbnail2.png)">Item 2</option> </select>
For some reason this doesn't load thumbnails. I made sure to test the paths and the thumbnails do exist (I did a
<img src="/_assets/_img/thumbnail1.png">
before the list to check that images get loaded.Any ideas how to accomplish this?
-
gaynorvader over 8 yearsThere's a jQuery plugin that does it relatively simply designwithpc.com/Plugins/ddSlick
-
tombeynon over 8 yearsGood example. This has been done hundreds of times before, OP should use a plugin instead of reinventing the wheel.
-
Jarett Lloyd about 4 yearsbut, i only want this one feature, so a plugin is major overkill
-
lacy about 4 yearsSome plugins might be "major overkill" but using a plugin isn't inherently overkill. In this case OP will likely be recreating all of the functionality of the HTML <select>, which will be complex if they intend to make it work "to spec." After adding the behavior and keyboard controls, a plugin may not feel like such overkill anymore.