为什么它没有在选项中显示图像？

Question

我试图为我的自动完成选项创建一个缩略图，但是无论我使用use，我都无法在选项上看到我的图像。我的代码有什么问题，或者如何使用图像上的选项？我说的是所有选项不同的图像，我不想使用样式背景，因为它只工作在firefox上

​

select {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
}

option {
  padding: 10px;
}

<select>
<option>Option 1 <img src="https://cdn4.iconfinder.com/data/icons/web-development-5/500/coffee-break-html-code-64.png"></option>
<option>Option 2 <img src="https://cdn4.iconfinder.com/data/icons/web-development-5/500/checked-www-domain-window-64.png"></option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

Answer 1

你需要这样做，我在Dodoma大学攻读软件工程学士学位时，尝试了我的一个项目。

<select>
  <option style="background-image:url(option1.png);">option 1</option>

  <option style="background-image:url(option2.png);">option 2</option>

</select>

或者为了取得更好的结果，可以这样做：

HTML:

<select id="selection">
  <option>option 1</option>

  <option>option 2</option>

</select>  

CSS:

select#selection option[value="option 1"] { background-image:url(option1.png); }


select#selection option[value="option 2"] { background-image:url(option2.png); }

Answer 2

您不能，只有在firefox中才可以在select上添加背景图像：

<select>
  <option style="background-image: url(images/1.jpg)">Option1 </option>
  <option style="background-image: url(images/2.jpg)">Option2 </option>
</select>