无法在 optgroup 标签属性中正确添加 html img 或图标

Question

我一直试图在optgroup标签属性中添加html元素，比如图像或字体很棒的图标，为此我需要在标签中添加span或img。我现有方法的问题是

1. 在optgroup的第一行添加fontwo敬畏会改变字体，这是不需要的
2. 必须在标签属性中添加html空间，这会破坏响应能力

CSS：

optgroup::first-line {
font-family: 'FontAwesome', 'sans-serif';
font-size: 14px;
font-weight: 500;
}

HTML

<select size="4" id="filterParentCategory" class="find_box" data-ng-model="Filter.CATEGORY_ID">
<option data-ng-repeat="cat in Filters" ng-if="cat.PARENT_GROUP==null" title="{{getCategoryName(cat)}}" value="{{cat.CATEGORY_ID}}">{{cat.CATEGORY_NAME}}</option>
<optgroup label='Special Projects &nbsp;&nbsp;&nbsp; &#xf068;' id="specialProjectsAccordian" onclick="hideFilterChildern()">
<option data-ng-repeat="cat in Filters" ng-if="cat.PARENT_GROUP==6" title="{{getCategoryName(cat)}}" value="{{cat.CATEGORY_ID}}">{{cat.CATEGORY_NAME}}</option>
</optgroup>
</select>

我已经尝试过了，但这是一个旧项目，添加selectpicker类会对已经运行的组件产生不希望的影响，所以我需要坚持使用html/CSS/JaveScript解决方案，而不添加任何其他依赖项。

Answer 1

HTML选择元素本身可以使用CSS进行样式设置，但不能使用其中的选项或optgroup。

单击选择元素后打开的下拉菜单由浏览器生成。

我的建议是使用自定义的JavaScript下拉菜单。