html - 由于“多个”属性背景颜色变为灰色

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并且您已经将这个班级设置为 all 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 选择选项中选定项目的背景着色吗？.