如何覆盖Bootstrap Select默认CSS修改下拉选项子文本颜色

问题原因 #

1. 类名拼写错误：Bootstrap 及 Bootstrap Select 给子文本默认添加的类是 .text-muted，你写的 .txt-muted 属于拼写错误，无法匹配到对应元素。
2. 选择器优先级不足：Bootstrap 自带的 .text-muted 样式优先级更高，需要使用更精确的选择器才能覆盖原有样式。

解决方法 #

如果需要修改所有下拉选项的子文本颜色，添加以下CSS即可：

/* 覆盖下拉列表中所有选项的子文本颜色 */
.dropdown-menu .dropdown-item .text-muted {
    color: #0d75d2 !important;
}

/* 如果需要同步修改选中后显示在选择框内的子文本颜色，额外添加以下规则 */
.filter-option-inner-inner .text-muted {
    color: #0d75d2 !important;
}

如果只需要修改「Moltiplicatore x 1.2」这一条子文本的颜色，使用更精确的选择器匹配即可：

/* 仅修改第一个可选选项的子文本颜色 */
.dropdown-menu .dropdown-item:nth-child(2) .text-muted {
    color: #0d75d2 !important;
}

原理说明 #

Bootstrap Select 渲染时不会直接复用 option 上的类控制子文本样式，会自动把 data-subtext 属性的内容包裹在带 .text-muted 类的标签内，嵌套在生成的下拉菜单结构中，只要匹配到正确的元素即可修改样式。

内容的提问来源于stack exchange，提问作者Snake93