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 ot

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.

Answer 2

What I have tried in inspect element form bootstrap-duallistbox

for options hover

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

Answer 3

For option contained in simple select I found this solution (not working with Firefox 79.0 )

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

But for option contained in select with 'multiple' option - <select class="selectpicker" multiple>- I have to use box-shadow property:

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

Additionally I was able to achieve control on :hover property in multiple select:

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

Unfortunately I don't know how to achieve the same behavior in simple select property.

I tested it on:

Chrome 84.0.4147.135

Firefox 79.0

Microsoft Edge 85.0.564.44