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

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

事实证明，要做到这一点，您必须像这样设置 option 的 background 属性，而不是 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>

---

在以下浏览器中测试工作:

window

• Chrome 45.0.2454.101+
• 火狐 36.0.4+
• IE 10+

Mac

• Chrome 45.0.2454.101+
• 火狐 40.0.3+
• 歌剧 30.0+

Ubuntu(感谢@davidkonrad)

• Chrome
• 火狐

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

---

我对这为什么有效的总体猜测

Using CSS multiple backgrounds状态:

With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back.

在我看来，用户代理蓝色背景仍然存在，但是 background: linear-gradient(#FFC894,#FFC894); 添加的彩色背景叠加在它上面.