因为 'multiple' 属性背景颜色更改为灰色

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

由于 'multiple' 属性背景颜色更改为灰色，但仅适用于最后选择的 'option'。

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 键尝试 select 多个选项。

Answer 2

事实上，您在 class selected_aq 中将此灰色设置为 background:#47D6EB，并且您已经将此 class 设置为所有 options , 因此它将应用于所有选项。

而且您不需要 JavaScript 来执行此操作，您可以使用 CSS :checked selector:

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>

更多详情您可以查看：

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

因为 'multiple' 属性背景颜色更改为灰色

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

html

css

html-select

jquery-multiselect

jquery-ui-multiselect