Bootstrap 5如何修改输入组选项hover状态的背景颜色

首先明确前提：原生<select>元素的下拉选项悬停样式是浏览器/操作系统接管渲染的，没有通用CSS属性可以跨所有浏览器稳定改掉默认的蓝色背景，要实现自定义效果，选下面两种方案即可：

方案一：用Bootstrap自带的Dropdown组件替换原生select（推荐，全浏览器兼容） #

这是最稳妥的方式，所有样式都能自由控制，和Bootstrap生态适配度最高，完全可以实现原生select的选择功能。
结构代码参考如下：

<div class="input-group">
  <button class="form-select text-start" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="osSelectBtn">
    Choose Your operating System
  </button>
  <ul class="dropdown-menu w-100">
    <li><a class="dropdown-item active" href="#" data-value="">Choose Your operating System</a></li>
    <li><a class="dropdown-item" href="#" data-value="1">Windows</a></li>
    <li><a class="dropdown-item" href="#" data-value="2">Mac</a></li>
    <li><a class="dropdown-item" href="#" data-value="3">Linux</a></li>
  </ul>
  <button class="btn download-btn" type="button">Download</button>
</div>

自定义hover样式直接覆盖下拉项的默认类即可，比如要把hover背景改成浅灰、文字改为深黑色：

.dropdown-menu .dropdown-item:hover {
  background-color: #f0f0f0;
  color: #212529;
}
/* 选中项的样式也可以按需调整 */
.dropdown-menu .dropdown-item.active {
  background-color: #0d6efd;
  color: #fff;
}

再补几行简单的JS处理选中交互就可以正常使用：

const dropdownItems = document.querySelectorAll('.dropdown-menu .dropdown-item')
const selectBtn = document.getElementById('osSelectBtn')
dropdownItems.forEach(item => {
  item.addEventListener('click', (e) => {
    e.preventDefault()
    dropdownItems.forEach(i => i.classList.remove('active'))
    item.classList.add('active')
    selectBtn.textContent = item.textContent
    // 读取item.dataset.value即可获取选中的选项值，可对接后续业务逻辑
  })
})

方案二：保留原生select，做有限样式覆盖 #

如果你不想改动现有DOM结构，只想直接给原生select加样式，可以尝试下面的CSS，注意这个方案在Safari等部分浏览器上不生效，属于Hack写法：

.form-select {
  /* 修改浏览器主色，部分浏览器会直接用这个颜色替换默认hover蓝色 */
  accent-color: #f0f0f0;
}

.form-select option {
  padding: 0.5rem;
}
/* 强制覆盖hover背景 */
.form-select option:hover {
  background-color: #f0f0f0 !important;
  box-shadow: 0 0 0 999px #f0f0f0 inset;
}

你原来写的原生select代码不需要做任何改动，直接引入上面这段CSS即可：

<div class="input-group">
  <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
    <option selected>Choose Your operating System</option>
    <option value="1">Windows</option>
    <option value="2">Mac</option>
    <option value="3">Linux</option>
  </select>
  <button class="btn download-btn" type="button">Download</button>
</div>

补充说明：如果项目要求所有浏览器下样式完全一致，直接选方案一即可。原生select的样式限制是浏览器渲染机制决定的，不存在完美的纯CSS修复方式。

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