Question: Im using [bootstrap-duallistbox](http://www.virtuosoft.eu/code/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.

[![enter image description here](https://i.stack.imgur.com/5rJVn.png)](https://i.stack.imgur.com/5rJVn.png)

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](http://jsfiddle.net/rgy8deb9/2/) showing the issue

Answer: 
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**
What I have tried in inspect element form [bootstrap-duallistbox](http://www.virtuosoft.eu/code/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;
    }

```