Change background color of clicked option in duallistbox
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.