because of 'multiple' attribute background color gets changed to grey

Question

.selected_aq{
background:#47D6EB !important;
color : #fff;
}

<select id="abc" multiple="multiple">
<option value="Customer 1" class="selected_aq">Customer 1</option>
<option value="Customer 1" class="selected_aq">Customer 1</option>
</select >

 for (x=0;x<list.options.length;x++){
         if (list.options[x].selected){
             $(list.options[x]).addClass('selected_aq');
          }

Because of 'multiple' attribute background color gets changed to grey but only for last selected 'option'.

Answer 1

You can use CSS only

 select[multiple]:focus option:checked { background: #47D6EB linear-gradient(0deg, #47D6EB 0%, #47D6EB 100%); color : #fff; } 

 <select id="abc" multiple="multiple"> <option value="Customer 1" >Customer 1</option> <option value="Customer 2" >Customer 2</option> <option value="Customer 3" >Customer 3</option> <option value="Customer 4" >Customer 4</option> <option value="Customer 5" >Customer 5</option> <option value="Customer 6" >Customer 6</option> </select > 

Try to select multiple options by holding Ctrl button.

Answer 2

In fact you are setting this grey color with background:#47D6EB in your class selected_aq and you are already setting this class to all the options , so it will be applied to all options.

And you don't need JavaScript to do this, you can do it with CSS :checked selector :

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

Demo:

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

 <select id="abc" multiple="multiple"> <option value="Customer 1" >Customer 1</option> <option value="Customer 2" >Customer 2</option> </select> 

For further details you can check:

Can I colour backgrounds of selected items in HTML select options with CSS only? .