Bootstrap下拉选择框样式颜色修改：无法替换默认蓝色

嘿，我来帮你解决这个Bootstrap下拉选择框的样式困扰～先给你理清楚背后的触发逻辑，再针对性给你修改样式的具体方法：

先搞懂Bootstrap下拉选择框的触发逻辑 #

Bootstrap的.form-select组件是基于原生HTML <select> 做的增强——它用CSS重置了原生控件的默认丑样式，套了一层自定义的视觉外壳，但点击下拉时本质还是触发原生select的展开行为。要是你同时在用Datatables，比如它的每页条数选择器，Datatables会自动生成带Bootstrap样式的select，逻辑和原生Bootstrap select一致，但要注意选择器的优先级哦。

另外为啥你直接给<option>和<select>加:hover、:active没效果？因为原生select的样式被浏览器限制得很死，很多伪类在原生控件上根本不生效，Bootstrap也没法完全突破这个限制，得换个思路来改。

1. 修改鼠标悬停在选项上的蓝色 #

这里分两种场景给你方案：

场景一：用的是原生Bootstrap .form-select #

原生<option>的:hover样式在Chrome、Firefox这些主流浏览器里基本不让直接改（浏览器对原生select的样式管控很严）。如果一定要自定义选项的悬停效果，建议换成Bootstrap的自定义下拉组件（用.dropdown配合.dropdown-menu模拟select），这样就能完全控制样式了：

/* 自定义下拉选项的悬停样式 */
.dropdown-item:hover, .dropdown-item:focus {
  background-color: #你的目标颜色; /* 替换成你想要的背景色 */
  color: #你的文字颜色; /* 可选：修改文字颜色 */
}

场景二：用的是Datatables集成的下拉框 #

Datatables的下拉筛选框（比如每页条数选择器）默认用的是Bootstrap的.form-select，选项还是原生<option>，同样没法直接改hover。如果不想换组件，只能试试针对特定浏览器的私有伪类（兼容性有限，仅支持Chrome/Safari）：

/* Chrome/Safari 下修改原生option的悬停背景 */
select::-webkit-menu-item:hover {
  background-color: #你的目标颜色;
}

2. 修改下拉框展开后的蓝色边框 #

这个其实是下拉框获取焦点时的边框+阴影效果，Bootstrap默认用:focus伪类控制，直接用下面的选择器覆盖就行：

/* 覆盖Bootstrap默认的焦点边框和阴影 */
.form-select:focus {
  border-color: #你的目标边框颜色;
  box-shadow: 0 0 0 0.25rem rgba(你的颜色值, 0.25); /* 调整阴影的颜色和透明度 */
}

如果是Datatables里的下拉框，为了确保优先级足够，可以加上Datatables的类：

.dataTables_length .form-select:focus {
  border-color: #你的目标边框颜色;
  box-shadow: 0 0 0 0.25rem rgba(你的颜色值, 0.25);
}

额外小Tips #

• 一定要把你的自定义CSS放在Bootstrap CSS之后引入，这样才能覆盖默认样式哦！
• 如果你用Sass写样式，可以直接修改Bootstrap的全局变量来一次性搞定，更优雅：

  // 先定义自定义颜色变量
  $form-select-focus-border-color: #你的目标颜色;
  $form-select-focus-box-shadow: 0 0 0 0.25rem rgba(你的颜色值, 0.25);
  // 再引入Bootstrap
  @import "bootstrap";
  

内容的提问来源于stack exchange，提问作者M.E.