html - 如何在选择字段中显示html

Question

我有一个 select 标签，我想在每个 option 的左边显示图片

我试过的是

<select>
    <option value="1">
        <div>
            <img src="some source img-circle" height="25" weight="25" style="float: left" /> Name 1 
        </div>
    </option>
    <option value="2">
        <div>
            <img src="some source img-circle" height="25" weight="25" style="float: left" /> Name 1 
        </div>
    </option>
</select>

但这什么都不显示，我也尝试将 div 放在 option 标签之外。请告诉我怎么做

输出应该是这样的

(image) My Name

Answer 1

更新:忘记了 ::before 不会对 select 起作用 - 这种方法会起作用，但您需要添加它到一个 div 作为选择的父级放置:

<div class="with-image">
  <select>
    <option></option>
  </select>
</div> 

这不起作用，因为 div 不能是 option 的子元素。您可以使用 CSS 实现此目的:

select::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(image.jpg);
}

这将添加一个伪元素，这是一件好事，因为图像不需要直接添加到 HTML 中的每个选择中。

更新 2:如果图像是动态加载的，这种方法仍然有效，只需稍作改动:

<div class="select-image">
  <span class="user-image" style="background-image: url(dynamic-url.jpg)"></span>
  <select>...</select>
</div>

然后使用 CSS 为 span 设置样式:

span.user-image{ 宽度:20px； 高度:20px； 显示:内联 block ；