无法在 optgroup 标签属性中正确添加 html img 或图标
发布于2023-03-23 22:20 阅读(1269) 评论(0) 点赞(25) 收藏(1)
我一直在尝试在 optgroup 标签属性中添加 html 元素，如图像或字体真棒图标，因为我需要标签内的 span 或 img。我现有方法的问题是
- 在 optgroup 的第一行添加 fontawesome 会更改不需要的字体
- 必须在标签属性内添加 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 ' 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 解决方案而不添加任何其他依赖项。
解决方案
HTML select 元素本身可以使用 CSS 设置样式，但不能使用其中的选项或选项组。
单击选择元素后打开的下拉菜单由浏览器生成。
我的建议是改为使用自定义 JavaScript 下拉菜单。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/513402/e07ecea83abe307d252d/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力