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

我正在使用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;
}

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

这是一个显示问题的jsFiddle

最佳答案

事实证明,要做到这一点,你必须设置选项的背景属性而不是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 */
}

Box/master/src/bootstrap-duallistBox.css" rel="stylesheet"/>
Box/master/src/jquery.bootstrap-duallistBox.js">

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

视窗

> Chrome 45.0.2454.101
>火狐36.0.4
> IE 10

苹果电脑

> Chrome 45.0.2454.101
>火狐40.0.3
> Opera 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.

在我看来,用户代理蓝色背景仍然存在,但背景添加的彩色背景：线性渐变(#FFC894,#FFC894);在它上面分层.

原文地址：https://www.jb51.cc/html/426180.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。