我有一个 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
最佳答案
更新:忘记了 ::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 ;
关于html - 如何在选择字段中显示html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43526817/