Bootstrap-select选中选项时如何让整个选择框背景变为黄色

我明白你的需求啦——现在选中选项后只有选择框内部的文字区域变黄，你想要整个选择框的背景都变成黄色。这是因为你原来的CSS只针对了选择框内部的.filter-option元素，而整个选择框的容器其实是.bootstrap-select下的按钮（.btn）元素。

修改后的CSS代码 #

/* 选中选项时，给整个选择框按钮设置黄色背景 */
.bootstrap-select.btn-group.show-tick .dropdown-toggle,
.bootstrap-select.btn-group:not([title=""]) .dropdown-toggle {
    background-color: yellow !important;
}
/* 去掉内部filter-option的背景，避免颜色重叠 */
.bootstrap-select.btn-group .dropdown-toggle:not([title=""]) .filter-option {
    background-color: transparent !important;
}

为什么这样改？ #

• 原来的CSS只作用于.filter-option，这只是选择框内部用来显示选中文字的小容器，所以只有那一小块区域变黄。
• 我们把样式目标改成.dropdown-toggle（也就是整个选择框的按钮本体），这样整个按钮的背景都会被设置成黄色。
• 加上.show-tick是为了兼容带勾选标记的selectpicker样式，确保所有选中状态都能触发背景色变化。
• 把.filter-option的背景设为透明，避免原来的局部黄色和新的整体黄色重叠，出现奇怪的分层效果。

完整代码示例 #

<select class="selectpicker form-control" data-size="40px" data-width="210px" style="height: 80px" data-live-search="true" data-none-Selected-Text="" data-hide-disabled="true" data-container="body" name="mittente_nucleo" id="mittente_nucleo">
<option></option>
<option>1</option>
<option>2</option>
</select>

.bootstrap-select.btn-group.show-tick .dropdown-toggle,
.bootstrap-select.btn-group:not([title=""]) .dropdown-toggle {
    background-color: yellow !important;
}
.bootstrap-select.btn-group .dropdown-toggle:not([title=""]) .filter-option {
    background-color: transparent !important;
}

这样设置之后，当你选中任何选项时，整个selectpicker的选择框背景就会全部变成黄色啦！

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