更改双列表框中单击选项的背景颜色 [英] Change background color of clicked option in duallistbox

问题描述

我正在使用

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

这到底是什么状态?应用于 option:active、option:hover、option:focus 的 CSS 无法选择此状态并更改颜色.

我认为这可能有效，但它也失败了.

select:-internal-list-box option:checked {颜色:#333 ！重要；背景颜色:#FFC894 ！重要；}

也没有:

select:-internal-list-box option:selected {颜色:#333 ！重要；背景颜色:#FFC894 ！重要；}选择:-内部列表框:焦点选项:选中{颜色:#333 ！重要；背景颜色:#FFC894 ！重要；}选择:-内部列表框:焦点选项:选择{颜色:#333 ！重要；背景颜色:#FFC894 ！重要；}选择:-内部列表框:焦点选项::选择{颜色:#333 ！重要；背景颜色:#FFC894 ！重要；}.bootstrap-duallistbox-container:focus 选择选项::选择{背景:#ffb7b7 ！重要；}

如何更改单击选项时显示的背景颜色?

这是一个 jsFiddle 显示问题

解决方案

事实证明，要做到这一点，您必须设置 option 的 background 属性而不是background-color 属性如下:

var demo1 = $('select').bootstrapDualListbox();

选择选项:悬停，选择选项:焦点，选择选项:活动，选择选项:选中{背景:线性梯度(#FFC894，#FFC894)；背景颜色:#FFC894 ！重要；/* 对于 IE */}

<link href="https://rawgit.com/istvan-ujjmeszaros/bootstrap-duallistbox/master/src/bootstrap-duallistbox.css" rel="样式表"/><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">选项1</option><option value="option2">选项2</option><option value="option3" selected="selected">选项3</option><option value="option4">选项4</option><option value="option5">选项5</option><option value="option6" selected="selected">选项6</option><option value="option7">选项7</option><option value="option8">选项8</option><option value="option9">选项9</option><option value="option0">选项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 确实看到了该属性，它在检查器中显示为活动状态，但无论如何它都会以某种方式忽略它.

<小时>

我完全猜测为什么会这样

使用 CSS 多背景 状态:><块引用>

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

在我看来，用户代理的蓝色背景还在，但是background: linear-gradient(#FFC894,#FFC894); 添加的彩色背景是分层的.

Im using bootstrap-duallistbox

Currently, when users click an option from either box, the option background turns blue for a second then the option is moved to the other select box.

I would like to change the color from blue to something else.

What state is this exactly? CSS applied to option:active, option:hover, option:focus do not work to select this state and change the color.

I thought this might work, but it also failed.

select:-internal-list-box option:checked {
    color: #333 !important;
    background-color: #FFC894 !important;
}

Nor did:

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

How can I change the background color displayed when an option is clicked?

Here is a jsFiddle showing the issue

解决方案

Turns out that to do this, you have to set the background property of the option not the background-color property like so:

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>

---

Tested working in the following browsers:

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 (thanks @davidkonrad)

• Chrome
• Fire Fox

Safari does see the property, it shows active in the inspector, but it somehow ignores it anyway.

---

My total guess at why this works

Using CSS multiple backgrounds states:

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.

It seems to me that, the user agent blue background is still there, but the colored background added by background: linear-gradient(#FFC894,#FFC894); is layered on top of it.

这篇关于更改双列表框中单击选项的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！