Change background color of clicked option in duallistbox

Question

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

Possible duplicate of [Change select box option background color](http://stackoverflow.com/questions/12836227/change-select-box-option-background-color), or http://stackoverflow.com/questions/2402146/html-select-selected-option-background-color-css-style — CBroe, Oct 03 '15 at 11:54
@CBroe, nope - its easy enough to get rid of the default browser colorization with pseudo selectors - here is my attempt -> **http://jsfiddle.net/b4x3ar6q/**, _but what about the small delay when you click / move items_? That is the real good question :) — davidkonrad, Oct 03 '15 at 12:47
@davidkonrad Exactly! Turns out it's the `background` property, not `background-color` — Wesley Smith, Oct 03 '15 at 21:21

Wesley Smith · Accepted Answer · 2015-10-04T01:55:13.163

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.

Have you checked in different browsers and so on? It works here, both chrome and FF on ubuntu. So webkit and moz is OK. It is really a good find. I would love to hear a CSS expert explain why it is so, but you really cant find any answer like this :) Perhaps because when you target only `background` - the overall completely generic - the browser accepts overruling all defaults? But again, really good. Remember to accept your own answer!! — davidkonrad, Oct 03 '15 at 21:37
@davidkonrad good call, I checked in all the browsers I have access to just now. `background-color: #FFC894 !important;` gets it done in IE but so far, safari stubbornly refuses to allow the change. Documentation on css related to the user agent stylesheets is really not available anywhere I can find but looking at some CSS specs, I updated above what I think might be happening. Ill be sure to close the question once the SO 2 day "accept your own answer" clock runs down lol — Wesley Smith, Oct 04 '15 at 01:59

score 1 · Answer 2 · answered Sep 03 '20 at 08:57

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

I’m not sure I understand, did you mean for this to be an answer, or are you asking a separate question? — Wesley Smith, Sep 03 '20 at 11:46
This is an answer for question included in the topic, plus additional information about how can you change background color of clicked option in `multiple select` element and hover event. If there is to many additional information please let me know. — Falcon, Sep 03 '20 at 12:08

score 0 · Answer 3 · answered Oct 03 '15 at 12:09

0

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

answered Oct 03 '15 at 12:09

Ganesh Yadav

2,607
2
29
52

1

I fail to see how this should be any different from `option:hover` etc, the same as OP mentions - it is the same and you still get the short default browser / OS colorization -> **http://jsfiddle.net/rgy8deb9/** – davidkonrad Oct 03 '15 at 12:43