How to add small thumbnails to `<option>` elements in a `<select>` list?

53,214

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

Share:
53,214
bodacydo
Author by

bodacydo

My name is Boda Cydo. I am from Africa but now live in Washington DC.

Updated on July 09, 2022

Comments

  • bodacydo
    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
    gaynorvader over 8 years
    There's a jQuery plugin that does it relatively simply designwithpc.com/Plugins/ddSlick
  • tombeynon
    tombeynon over 8 years
    Good example. This has been done hundreds of times before, OP should use a plugin instead of reinventing the wheel.
  • Jarett Lloyd
    Jarett Lloyd about 4 years
    but, i only want this one feature, so a plugin is major overkill
  • lacy
    lacy about 4 years
    Some 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.