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

发布时间：2020-12-14 22:57:21 所属栏目：资源来源：网络整理

导读：我正在使用bootstrap-duallistbox 目前,当用户从任一框中单击选项时,选项背景将变为蓝色一秒钟,然后该选项将移动到另一个选择框. 我想将颜色从蓝色更改为其他颜色. 这究竟是什么状态？ CSS应用于选项：活动,选项：悬停,选项：焦点无法选择此状态并更改颜色.

我正在使用bootstrap-duallistbox

目前,当用户从任一框中单击选项时,选项背景将变为蓝色一秒钟,然后该选项将移动到另一个选择框.

enter image description here

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

这究竟是什么状态？ 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 */
}


测试在以下浏览器中工作：
视窗
> 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);在它上面分层.


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!