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

韦斯利·史密斯

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

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

这到底是什么状态？CSS应用option:active，option:hover，option:focus不干活，就选择此状态，并改变颜色。

我以为这可能有用，但也失败了。

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的财产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 */
}

<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>

经过测试，可以在以下浏览器中运行：

视窗

铬45.0.2454.101+
火狐36.0.4+
IE 10以上

苹果电脑

铬45.0.2454.101+
火狐40.0.3+
Opera 30.0+

Ubuntu（感谢@davidkonrad）

铬
火狐

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

我完全猜测为什么这行得通

使用CSS多背景状态：

使用CSS3，您可以将多个背景应用于元素。这些背景相互叠放，您提供的第一个背景位于顶部，背面提供了最后一个背景。

在我看来，用户代理蓝色背景仍然存在，但是添加的彩色背景background: linear-gradient(#FFC894,#FFC894);位于其上方。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-10-30

我来说两句

0 条评论

登录后参与评论

上一篇：递归的复杂度T（n）= T（n-2）+ 1 / lgn？

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

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

这是一个显示问题的jsFiddle

经过测试，可以在以下浏览器中运行：

视窗

苹果电脑

Ubuntu（感谢@davidkonrad）

我完全猜测为什么这行得通

Linux的官方Adobe Flash存储库是否已过时？

用日期数据透视表和日期顺序查询

应用发明者仅从列表中选择一个随机项一次

Java Eclipse中的错误13，如何解决？

在Windows 7中无法删除文件（2）

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

套接字无法检测到断开连接

带有错误“ where”条件的查询如何返回结果？

有什么解决方案可以将android设备用作Cast Receiver？

Mac OS X更新后的GRUB 2问题

ggplot：对齐多个分面图-所有大小不同的分面

验证REST API参数

如何从视图一次更新多行（ASP.NET - Core）

尝试反复更改屏幕上按钮的位置 - kotlin android studio

计算数据帧中每行的NA

检索角度选择div的当前值

离子动态工具栏背景色

UITableView的项目向下滚动后更改颜色，然后快速备份

VB.net将2条特定行导出到DataGridView

蓝屏死机没有修复解决方案

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException