Bootstrap 如何样式引导多选活动选项bg颜色

vnzz0bqm  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(1)|浏览(136)

我想更改 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>

加载页面后(图片1):

当选项被选中并且仍然有效时(图2):

选择并移开后(图3):

我如何改变选定的和仍然活跃 * 背景颜色 *(图片2)?
我尝试了
activefocusCSS 样式,但它们对 bg color 没有任何影响:

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

mpgws1up1#

pic 2具有以下选择器:
:聚焦于选择,并:选中选项:select.my-select:focus option:checked
你不能设置背景颜色,但你可以考虑像这样应用一个盒子阴影:box-shadow: 0 0 10px 100px green inset;

select.my-select:focus option:checked {
    box-shadow: 0 0 10px 100px green inset;
}

相关问题