Из-за атрибута "множественный" цвет фона меняется на серый

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');
          }

Из-за атрибута "множественный" цвет фона меняется на серый, но только для последней выбранной "опции".

Answer 1

Вы можете использовать только CSS

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 >

Попробуйте выбрать несколько вариантов, удерживая кнопку Ctrl.

Answer 2

На самом деле вы устанавливаете этот серый цвет с background:#47D6EB в вашем классе selected_aq и вы уже устанавливаете этот класс для всех options, так что будет применяться ко всем вариантам.

И вам не нужен JavaScript для этого, вы можете сделать это с помощью CSS : флажок:

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

Демо - версия:

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>

Для более подробной информации вы можете проверить:

Могу ли я раскрасить фон выделенных элементов в HTML-настройках только с помощью CSS?,