更改双重列表框中被单击选项的背景颜色

Question

Im使用bootstrap-duallistbox

目前，当用户单击任一框中的选项时，选项背景会变成蓝色一秒钟，然后该选项会移动到另一个选择框中。

我想将颜色从蓝色更改为其他颜色。

这到底是什么状态？应用于选项：活动、选项：悬停、选项：焦点的 CSS 无法选择此状态并更改颜色。

我以为这可能行得通，但也失败了。

select:-internal-list-box option:checked {
    color: #333 !important;
    background-color: #FFC894 !important;
}

也没有：

select:-internal-list-box option:selected  {
    color: #333 !important;
    background-color: #FFC894 !important;
}

select:-internal-list-box:focus  option:checked  {
    color: #333 !important;
    background-color: #FFC894 !important;
}

select:-internal-list-box:focus  option:selected  {
    color: #333 !important;
    background-color: #FFC894 !important;
}

select:-internal-list-box:focus option::selection  {
    color: #333 !important;
    background-color: #FFC894 !important;
}

.bootstrap-duallistbox-container:focus select option::selection {
    background: #ffb7b7 !important;
}

如何更改单击选项时显示的背景色？

Answer 1

我在检查元素表单bootstrap-duallistbox中尝试过什么

对于选项悬停

.bootstrap-duallistbox-container select option:hover, 
.bootstrap-duallistbox-container select option:focus, 
.bootstrap-duallistbox-container select option:active  {
        background-color: red;
    }

Answer 2

对于包含在simple select中选项，我找到了这个解决方案(不适用于Firefox 79.0)

select:focus > option:checked {
  background: #red !important;
  color: #fff !important;
}

但是对于带有“多个”选项的select中包含的选项-

option:checked {
  box-shadow: 0 0 10px 100px red inset;
  color: #fff !important;
}

此外，我能够实现对中： hover属性的控制多选：

option:hover {
  box-shadow: 0 0 10px 100px red inset;
  color: #fff !important;
}

不幸的是，我不知道如何在简单的select属性中实现相同的行为。

我测试了它:

Chrome84.0.4147.135

火狐 79.0

Microsoft Edge85.0.564.44

Answer 3

原来，要做到这一点，您必须设置< code>option的< code>background属性，而不是< code>background-color属性，如下所示:

var demo1 = $('select').bootstrapDualListbox();

select option:hover, 
select option:focus, 
select option:active, 
select option:checked
{
    background: linear-gradient(#FFC894,#FFC894);
    background-color: #FFC894 !important; /* for IE */
}

<link href="https://rawgit.com/istvan-ujjmeszaros/bootstrap-duallistbox/master/src/bootstrap-duallistbox.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/istvan-ujjmeszaros/bootstrap-duallistbox/master/src/jquery.bootstrap-duallistbox.js"></script>
<select multiple="multiple" size="10" name="" class="no_selection">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3" selected="selected">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6" selected="selected">Option 6</option>
    <option value="option7">Option 7</option>
    <option value="option8">Option 8</option>
    <option value="option9">Option 9</option>
    <option value="option0">Option 10</option>
</select>