html - 如何添加跨度以选择选项元素以在每个选项中显示标志？

Question

我正在研究一个可以帮助用户轻松选择语言的选择。我遇到了 https://github.com/lipis/flag-icon-css 的问题为每个选项添加一个标志。请帮忙。

我添加了 css 并在没有内部选择的简单元素中进行了测试，它显示了但在内部选项中它不起作用我尝试了数据内容也没有工作。

<select class="form-control">
   <option value="HU_hu" data-content='<span class="flag-icon flag-icon-hu"></span>'></option>
   <option value="EN_en" data-content='<span class="flag-icon flag-icon-hu"></span>'></option>
   <option value="DE_de" data-content='<span class="flag-icon flag-icon-hu"></span>'></option>
   <option value="RU_ru" data-content='<span class="flag-icon flag-icon-hu"></span>'></option>
</select>

Answer 1

这取决于您想要支持的浏览器以及您想要这些标志的程度。根据我的经验，使用 div 自己构建一个“类似选择”表单比在选择元素上获取图像或与此相关的任何样式更容易。但如果你坚持使用 select 元素，你可以看看 this question.