Keep Background Color For Option When Changing Focus

In this example : https://jsfiddle.net/pfc1qauz/10/ when I select 2 and changing focus to C (anything on the right part), the background color of 2 has become grey. How to keep it

Solution 1:

This is likely the result of a browser-specific style. As you can see if you use the Developer Tools (F12) within Google Chrome :

select:-internal-list-box option:checked {
    background-color: -internal-inactive-list-box-selection;
    color: -internal-inactive-list-box-selection-text;
}

Even if you were to add this same style using your own values, it still would not override it properly :

select:-internal-list-box option:checked {
    background-color: red!important;
    color: #FFF!important;
}

This is applying the style that you are seeing to the checked options within any <select> elements and it cannot really be directly overridden.

<select> elements are notoriously difficult to style in any kind of cross-browser sense. If it's something that you really need to handle, you would likely need to use a Javascript-based solution like select that would override the default <select> as a facade that uses <div> or other elements for styling purposes.

Solution 2:

This can be done with some JavaScript that draws a strip over the select when it loses focus. The strip is positioned over the selected option so that it has the same position and size, also font/padding etc, but it has a different background color. I managed to code a script that does the trick for an intranet site of mine, so it works well with multiple selects with size>1 on one page. When the selected option is not completely visible, the strip is also drawn only partially. This problem obviously does not happen in selects with size=1.

Solution 3:

When you change only background color, it will not change. Try this,

select[multiple]:focus option:checked {
    background: red linear-gradient(0deg, red 0%, red 100%);
}

For more info, please refer this link