Change background color of clicked option in duallistbox

Question

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

Answer 1

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.