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

Question

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?

Answer 1

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