Select2输入框选中结果无法更改背景颜色问题

嘿，我懂你在使用Select2实现多选功能时遇到的麻烦——点击选中结果项时没法自定义背景色对吧？这其实是因为Select2会自动生成一套专属的DOM结构，它的默认样式优先级比较高，咱们只需要用更精准的CSS选择器来覆盖默认规则就能搞定！

具体解决方案 #

你只需要在样式表中添加以下CSS代码，把颜色值替换成你想要的就行：

/* 自定义下拉列表中已选中项的背景色 */
.select2-results__option--selected {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

/* 自定义输入框内已选中标签的背景色 */
.select2-selection__choice {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

关于!important的说明 #

因为Select2自带的默认CSS规则优先级很高，普通选择器没法覆盖它，!important可以强制让咱们自定义的样式优先级更高，确保设置能生效。

针对你的代码精准优化 #

如果你想只针对你那个select2-multi类的选择器生效，还可以把选择器写得更精准：

.select2-multi .select2-results__option--selected {
    background-color: #28a745 !important;
    color: #ffffff;
}

.select2-multi .select2-selection__choice {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

把这段代码加到你的项目样式里，就能看到选中项的背景色按照你的需求变化啦！

内容的提问来源于stack exchange，提问作者J. Robinson