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

问题描述

我一直在尝试在optgroup label属性内添加html元素，例如图像或超酷字体图标，因为我需要在标签内添加一个span或img。我现有方法的问题是

1. 在optgroup的第一行添加fontawesome会更改不需要的字体
2. 必须在label属性内添加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>

我尝试过this，但是它是一个旧项目并添加selectpicker类会对已经运行的组件产生不良影响，因此我需要坚持使用html / CSS / javescript解决方案，而无需添加任何其他依赖项。

解决方法

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

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

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