将图像与选项放在下拉列表中 [英] Putting images with options in a dropdown list

问题描述

我试图在下拉列表中插入图像。我尝试了下面的代码，但它不工作。什么是最好的方式来实现这一目标？

 < select> 
< option value =volvo>< IMG src =a.jpgHEIGHT =15WIDTH =15BORDER =0align =center> Volvo< / option> ; 
< option value =saab>< IMG src =b.jpgHEIGHT =15WIDTH =15BORDER =0align =center> Saab< / option> ; 
< option value =mercedes>< IMG src =c.jpgHEIGHT =15WIDTH =15BORDER =0align =center> Mercedes< / option> ; 
< option value =audi>< IMG src =d.jpgHEIGHT =15WIDTH =15BORDER =0align =center> Audi< / option> ; 
< / select> 
  

解决方案

此代码仅适用于Firefox：

 < select> 
< option value =volvostyle =background-image：url（images / volvo.png）;> Volvo< / option> 
 < option value =hondastyle =background-image：url（images / honda.png）;> Honda< / option> 
< option value =audistyle =background-image：url（images / audi.png）;> Audi< / option> 
< / select> 
  

---

编辑（2018年4月）：

Firefox不再支持此功能。

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>

解决方案

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.

这篇关于将图像与选项放在下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！