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

前端之家收集整理的这篇文章主要介绍了html – 更改duallistbox中单击选项的背景颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用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 */
}
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.

@H_403_79@

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

猜你在找的HTML相关文章