Select2库使用问题：如何修改下拉选中项的背景高亮颜色

解决方法 #

你遇到的是Select2默认高亮样式优先级过高导致自定义样式不生效的问题，根据你使用的Select2版本选择对应CSS代码覆盖即可：

Select2 4.x 版本（目前主流版本）

/* 覆盖下拉展开时 hover/键盘导航选中的高亮背景 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #你要替换的色值;
    /* 可选：同步修改文字颜色 */
    color: #ffffff;
}

/* 可选：覆盖下拉列表中已选中项的背景色 */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #你要替换的已选中项色值;
}

Select2 3.x 老旧版本

.select2-results .select2-highlighted {
    background: #你要替换的色值;
    color: #ffffff;
}

样式不生效常见排查方案 #

• 确认你的自定义CSS文件加载顺序在Select2官方CSS文件之后，才能保证优先级覆盖默认样式
• 如果你使用的是非默认主题（比如Bootstrap适配主题），将代码中的.select2-container--default替换为对应主题的类名，比如Bootstrap主题对应为.select2-container--bootstrap
• 以上修改都无效时，可以临时在属性值后加!important测试是否是样式优先级冲突导致的问题

内容的提问来源于stack exchange，提问作者Donald Yañez