如何修改Bootstrap 4.6下拉选择框选中/悬停时的背景色？

一、关于下拉选项蓝色背景的全局变量 #

Bootstrap 4.6没有提供专门的全局变量来修改原生<select class="custom-select">下拉选项的蓝色高亮背景。这是因为原生select的选项样式大多受浏览器默认行为限制，Bootstrap并未对这部分提供可配置的全局变量，你尝试的custom-select-bg等变量均不属于Bootstrap 4.6的内置变量。

二、兼容且持久的修改方案 #

由于原生select的样式局限性，推荐两种方案：

1. 使用Bootstrap Dropdown组件模拟下拉框（推荐） #

用Dropdown组件替代原生select，能完全自定义所有样式，包括选项的高亮、hover背景色。示例代码：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    选择选项
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item active" href="#">Open this select menu</a>
    <a class="dropdown-item" href="#">One</a>
    <a class="dropdown-item" href="#">Two</a>
    <a class="dropdown-item" href="#">Three</a>
  </div>
</div>

对应的SCSS自定义样式：

// 自定义下拉菜单选项高亮背景
$dropdown-link-active-bg: #6b37c4; // 替换成你的主色调
// 自定义hover背景
.dropdown-item:hover {
  background-color: yellow;
}

这种方式完全脱离原生select的限制，样式可控性极强，且符合Bootstrap的设计规范。

2. 针对原生select的hack方案（兼容性有限） #

如果必须使用原生select，可通过以下CSS修改选中时的背景（hover样式无法通过常规CSS实现，因为浏览器不支持）：

.custom-select option:checked {
  background-color: #6b37c4 !important;
  color: #fff;
}

注意：该方案仅能修改选中状态的背景，hover状态无法生效，且部分浏览器可能存在兼容性问题。

三、实现选项hover黄色背景的方法 #

原生select的<option>元素不支持:hover伪类，浏览器禁止修改这部分样式，因此必须使用模拟下拉组件（如上述的Bootstrap Dropdown）才能实现hover背景变黄的效果，在Dropdown组件中直接给.dropdown-item:hover设置背景色即可。

四、阻止下拉菜单关闭以检查CSS #

针对原生select，打开下拉后点击F12会导致菜单关闭，可通过以下方法锁定菜单：

1. 打开浏览器控制台（F12）；
2. 执行以下代码：

setTimeout(() => { debugger; }, 2000);

3. 立即点击打开下拉菜单，2秒后浏览器会进入调试模式，此时下拉菜单会保持打开状态，即可正常检查CSS样式。

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