如何在选择字段的HTML

我有一个select标签显示，我想在离开的每一个option如何在选择字段的HTML

我想那是什么

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

但这不显示任何显示图片，我也试图在option标记之外放div。请告诉我如何

输出应该像

(image) My Name

来源

2017-04-20 Alen

您只能将文本置于选项标签中，如文档所述：https：//developer.mozilla.org/en-US/docs/Web/HTML/Element/option – JensV

更新：忘了::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.user图像{ width：20px; height：20px; display：inline-block; }

来源

2017-04-20 18:12:24 Toby

现在，这将是一个问题。这些选项通过foreach循环迭代，每个选项都是用户，每个用户都有不同的图片。背景图像获取一个网址，你可以设置为内嵌式的 - - 我会更新我的职务，如果我使用CSS的背景图像，然后将每一个节点 – Alen

我仍然会使用CSS这是一样的。 – Toby

是的，用foreach来解释一下。我是后端工程师，学习这个设计的东西 – Alen

如何在选择字段的HTML

回答

相关问题