改变Duallistbox中所选选项的背景颜色

Question

改变Duallistbox中所选选项的背景颜色

htmlcsstwitter-bootstrapdrop-down-menu

8

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

- Wesley Smith

可能是更改选择框选项背景颜色的重复问题，或者是https://dev59.com/RnE95IYBdhLWcg3wOLU1。 - CBroe

1

@CBroe，不是的 - 用伪选择器轻松摆脱默认浏览器着色很容易 - 这是我的尝试 -> **http://jsfiddle.net/b4x3ar6q/**，_但是当你点击/移动项目时会有一些小延迟怎么办呢_？这才是真正的好问题 :) - davidkonrad

@davidkonrad 没错！事实证明是 background 属性，而不是 background-color。 - Wesley Smith

3个回答

1

对于包含在简单的select中的选项，我找到了这个解决方案（不适用于Firefox 79.0）。

select:focus > option:checked {
  background: #red !important;
  color: #fff !important;
}

但是对于包含 'multiple' 选项的选择器 - <select class="selectpicker" multiple> - 我必须使用 box-shadow 属性：

option:checked {
  box-shadow: 0 0 10px 100px red inset;
  color: #fff !important;
}

此外，我能够在多选框中实现对：hover属性的控制：

option:hover {
  box-shadow: 0 0 10px 100px red inset;
  color: #fff !important;
}

很遗憾，我不知道如何在简单的

- Falcon

我不确定我理解了，你是想这个作为答案，还是在问一个单独的问题？ - Wesley Smith

这是关于主题中包含的问题的答案，以及有关如何更改 多选 元素中已选项的背景颜色和悬停事件的额外信息。如果有太多的附加信息，请告诉我。 - Falcon

0

我在检查元素表单中尝试了 bootstrap-duallistbox 的内容

用于选项悬停

.bootstrap-duallistbox-container select option:hover, 
.bootstrap-duallistbox-container select option:focus, 
.bootstrap-duallistbox-container select option:active  {
        background-color: red;
    }

- Ganesh Yadav

1

我不明白这与 option:hover 有什么不同，正如 OP 所提到的那样 - 它是相同的，你仍然会得到默认的浏览器/操作系统颜色 -> **http://jsfiddle.net/rgy8deb9/**。 - davidkonrad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wesley Smith · Accepted Answer

原来，要实现这个功能，您需要设置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>

以下浏览器已测试可用：

Windows

Chrome 45.0.2454.101+
Fire Fox 36.0.4+
IE 10+

Mac

Chrome 45.0.2454.101+
Fire Fox 40.0.3+
Opera 30.0+

Ubuntu (感谢 @davidkonrad)

Chrome
Fire Fox

Safari 可以看到该属性，且在检查器中显示为活动状态，但无论如何都会忽略它。

我猜测它能工作的原因

使用 CSS 多重背景中提到：

使用 CSS3，你可以向元素应用多个背景。这些背景层在彼此之上，你提供的第一个背景在顶部，而列表中列出的最后一个背景位于最底部。

我认为，用户代理蓝色背景仍然存在，但通过 background：linear-gradient（＃FFC894，＃FFC894）; 添加的带颜色的背景叠加在其上方。