更改双列表框中单击选项的背景颜色

Posted 2023-02-21

【中文标题】更改双列表框中单击选项的背景颜色

【英文标题】：Change background color of clicked option in duallistbox

【发布时间】：2015-12-31 12:43:12

【问题描述】：

我正在使用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 显示问题

【问题讨论】：

Change select box option background color 或 ***.com/questions/2402146/… 的可能重复

@CBroe，不-它很容易摆脱带有伪选择器的默认浏览器着色-这是我的尝试-> jsfiddle.net/b4x3ar6q，但是什么关于单击/移动项目时的小延迟？这是一个真正的好问题:)

@davidkonrad 没错！原来是background 属性，而不是background-color

【参考方案1】：

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

选项悬停

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

【讨论】：

我看不出这应该与option:hover 等有什么不同，就像 OP 提到的一样 - 它是一样的，你仍然会得到简短的默认浏览器/操作系统着色 -> jsfiddle.net/rgy8deb9

【参考方案2】：

事实证明，要做到这一点，您必须像这样设置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>

---

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

窗口

Chrome 45.0.2454.101+ 火狐 36.0.4+ IE 10+

Mac

Chrome 45.0.2454.101+ 火狐 40.0.3+ Opera 30.0+

Ubuntu（感谢@davidkonrad）

铬 火狐

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

---

我对为什么会这样的总体猜测

Using CSS multiple backgrounds 状态：

使用 CSS3，您可以为元素应用多个背景。它们相互叠加，您提供的第一个背景在顶部，最后一个背景在后面列出。

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

【讨论】：

你检查过不同的浏览器等等吗？它在这里工作，在 ubuntu 上的 chrome 和 FF 都适用。所以 webkit 和 moz 都可以。这真的是一个很好的发现。我很想听 CSS 专家解释为什么会这样，但你真的找不到这样的答案 :) 也许是因为当你只针对 background - 整体完全通用 - 浏览器接受否决所有默认值？但同样，真的很好。记得接受你自己的答案！！

@davidkonrad 好电话，我检查了我刚才可以访问的所有浏览器。 background-color: #FFC894 !important; 在 IE 中完成，但到目前为止，safari 顽固地拒绝允许更改。与用户代理样式表相关的 css 文档在我能找到的任何地方都找不到，但查看一些 CSS 规范，我更新了我认为可能发生的情况。一旦 SO 2 天“接受你自己的答案”时钟耗尽，我一定会关闭问题大声笑

【参考方案3】：

对于简单的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;

此外，我还能够控制multiple select 中的:hover 属性：

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

不幸的是，我不知道如何在简单的 select 属性中实现相同的行为。

我测试过：

Chrome 84.0.4147.135

Firefox 79.0

Microsoft Edge 85.0.564.44

【讨论】：

我不确定我是否理解，你的意思是作为一个答案，还是你在问一个单独的问题？

这是主题中包含的问题的答案，以及有关如何更改 multiple select 元素和悬停事件中单击选项的背景颜色的其他信息。如果还有很多其他信息，请告诉我。