Change Background Color Of Selected Items In "multiselect" Dropdown Box?

I want to give the yellow color to the selected items in multiselect dropdown box. By default, it has gray background after selecting, How to do this in HTML, CSS. This question is

Solution 1:

We can simply do with the help of the below CSS:

select option:checked{
  background: #1aab8e-webkit-linear-gradient(bottom, #1aab8e0%, #1aab8e100%);
}

Solution 2:

<style>.select2-container--default.select2-results__option[aria-selected=true] {
        background-color: inherit;
        color: lightgray;
    }
</style>

Add your own style inside the block.

Solution 3:

The following should work (for browsers that allow styling option tags), however the default select styling will override in most cases. You may be able to find a way to disable this however:

• http://jsfiddle.net/DEDX7/
• http://jsfiddle.net/DEDX7/1/

css

select option.selected {
  font-weight: bold;
  color: red;
}

javascript

functionhighlight_options(field){
  var i,c;
  for(i in field.options){
    (c=field.options[i]).className=c.selected?'selected':'';
  }
}

markup

<selectonchange="highlight_options(this)"multiple="multiple"><option>One</option><option>Two</option><option>Three</option></select>

Solution 4:

Pure CSS would help here:

option:checked

Solution 5:

You can't. The <option> element does not accept CSS styling.

You can used a JavaScript-based alternative. There are many <select> replacement scripts available.