Question

我正在尝试为自动填充选项创建缩略图，但无论我使用css，我都无法看到我的图片。我的代码出现了什么问题或者怎么会发生？在选项上使用图像？我正在谈论所有选项不同的图像，我不想使用样式背景，因为它只能运行firefox

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

你不能，只有在firefox中可以在select上添加背景图片：

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

Answer 2

你需要这样做，我在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); }

为什么它没有出现在选项中？

2 个答案: