更改duallistbox中单击选项的背景颜色

Question

我正在使用bootstrap-duallistbox

目前，当用户从任一框中单击某个选项时，选项背景将变为蓝色一秒钟，然后该选项将移至另一个选择框。

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

这到底是什么状态？应用于option:active，option:hover，option:focus的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;
}

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

以下是显示问题的jsFiddle

Answer 1

事实证明，要执行此操作，您必须设置background的{​​{1}}属性，而不是option属性，如下所示：

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 */
}

在以下浏览器中进行了测试：

窗

• Chrome 45.0.2454.101 +
• Fire Fox 36.0.4 +
• IE 10 +

的Mac

• Chrome 45.0.2454.101 +
• Fire Fox 40.0.3 +
• Opera 30.0 +

Ubuntu（感谢@davidkonrad）

• Chrome
• 火狐

Safari 会看到该属性，它在检查器中显示为活动状态，但无论如何它都会忽略它。

我猜这个有效的原因

Using CSS multiple backgrounds州：

  

使用CSS3，您可以将多个背景应用于元素。它们彼此叠加，您在顶部提供的第一个背景和背面列出的最后一个背景。

在我看来，用户代理蓝色背景仍然存在，但<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>添加的彩色背景位于其上方。

Answer 2

我在检查元素表单bootstrap-duallistbox

中尝试了什么

用于选项悬停

HandlerMethodArgumentResolver

Answer 3

对于简单select中包含的选项，我发现了此解决方案（不适用于Firefox 79.0）

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

但是对于包含在带有'multiple'选项的select中的选项-<select class="selectpicker" multiple>-我必须使用box-shadow属性：

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

此外，我还可以控制:hover中multiple select属性：

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

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

我在以下位置进行了测试：

Chrome 84.0.4147.135

Firefox 79.0

Microsoft Edge 85.0.564.44