Keep background color for option when changing focus

Question

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 red when it is not focus ?

HTML:

<select class="multiselect-left" size=4>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<select class="multiselect-right" size=4>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

CSS:

option{
  background: #F00;
}

Thanks,

No : click on 2 then on B then outside => 2 and B will be grey. I want them red. — Benjamin, Apr 06 '16 at 15:31

score 3 · Accepted Answer · answered Apr 06 '16 at 15:30

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.

Ho ok :-/ So no simple way to do that. – Benjamin Apr 07 '16 at 08:47 — Benjamin, Apr 07 '16 at 08:47

score 1 · Answer 2 · answered May 19 '19 at 14:00

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.

score 0 · Answer 3 · answered Feb 06 '20 at 10:01

0

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

answered Feb 06 '20 at 10:01

Bala555

119
1
6

Keep background color for option when changing focus

3 Answers3

Linked