Menu
I was trying to insert images in a drop down list. I tried the following code but its not working. What is the best way to achieve this?
<select> <option value="volvo"><IMG src="a.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Volvo</option> <option value="saab"><IMG src="b.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Saab</option> <option value="mercedes"><IMG src="c.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Mercedes</option> <option value="audi"><IMG src="d.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Audi</option> </select> 
655
Add <img> tag in dropdown content to insert image into dropdown list for each items.
In HTML, <option> tags only display text, not images.
On the worksheet where you applied the drop-down list, select a cell that has the drop-down list. Go to Data > Data Validation. On the Settings tab, click in the Source box, and then change your list items as needed. Each item should be separated by a comma, with no spaces in between like this: Yes,No,Maybe.
This code will work only in Firefox:
<select> <option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option> <option value="saab" style="background-image:url(images/saab.png);">Saab</option> <option value="honda" style="background-image:url(images/honda.png);">Honda</option> <option value="audi" style="background-image:url(images/audi.png);">Audi</option> </select> Edit (April 2018):
Firefox does not support this anymore.
175
You can't do that in plain HTML, but you can do it with jQuery:
JavaScript Image Dropdown
Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing "select" element or you can create by JSON object.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
