如何修改Bootstrap多选框选中激活状态的背景颜色

我想要修改Bootstrap多选下拉框中选中且处于激活状态选项的background-color，目前该状态的背景色为红色。

页面代码 #

<select
      className="form-select my-select"
      multiple
      aria-label="My select example"
      >
        <option selected>No selection</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
</select>

不同状态截图 #

• 页面加载后：
  
• 选项选中且处于激活状态时（需要修改的目标状态）：
  
• 选中后移开鼠标/失去焦点：
  

问题 #

如何修改选中且仍处于激活状态的背景颜色（对应上图的“选中且激活状态”）？

我尝试过针对active和focus的CSS样式，但对背景颜色没有任何效果：

.my-select option:focus, option.focus{   background-color: green !important; }

.my-select option:active, option.active{   background-color: green !important; }

解决方案 #

原生<select multiple>的选项样式受浏览器默认样式限制，直接用active/focus伪类无法精准定位“选中+激活”的状态，需要结合:checked（标记已选中选项）和:focus/:hover/:active（标记激活状态）组合定位，同时还要覆盖浏览器自带的背景图样式，确保自定义颜色生效。

使用以下CSS代码即可修改目标状态的背景色：

/* 覆盖选中且处于聚焦/鼠标悬停状态的选项背景 */
.my-select option:checked:focus,
.my-select option:checked:hover {
  background-color: green !important;
  /* 移除浏览器默认的高亮背景图，避免覆盖自定义颜色 */
  background-image: none;
}

/* 针对键盘导航激活选中选项的情况 */
.my-select option:checked:active {
  background-color: green !important;
  background-image: none;
}

这段代码会将图2中红色的激活选中背景替换为绿色，同时不影响其他状态的样式。

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