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

由于“多个”属性背景颜色变为灰色，但仅限于最后选择的“选项”。

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设置此灰色background:#47D6EB您的类selected_aq background:#47D6EB并且您已经将此类设置为所有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> 

有关详细信息，请查看：

我可以仅使用CSS为HTML选项中的所选项目添加背景吗？ 。