如何选择带有HTML标签的两行显示的选项下拉数据？

Question

我想用不同的HTML标签在两行中创建HTML下拉数据。

这是我的尝试：

<select class="form-control" data-placeholder="Product..." multiple>
    <option value="">Product...</option>
    <option value=""><b>Danish Patel</b><label>PhD Developer</label></option>
</select>

我如何完成此任务？

Answer 1

感谢神的解决方法！有可能的;只需使用 {:before ::before和 :after ::after以及data-属性即可。

通过这种方式，您可以在option的主要内容之前或之后使用粗体的多行。

option.bold-before::before {
  content: attr(data-bold);
  font-weight: 700;
  display: block;
}
option.bold-after::after {
  content: attr(data-bold);
  font-weight: 700;
  display: block;
}

<select class="form-control" data-placeholder="Product..." multiple>
    <option value="">Product...</option>
    <option value="" class="bold-before" data-bold="Danish Patel"><label>PHP Developer</label></option>
    <option value="" class="bold-after" data-bold="CSS Wizard"><label>Yaakov Ainspan</label></option>
</select>