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'.

Not sure what you are asking. Can you please create a [mcve] so we can see what the issue is live? And also mention what browser(s) you are having the problem in. — CBroe, May 10 '17 at 13:00
The value `#47D6EB` is what gives grey color and not the `multiple` attribute. — cнŝdk, May 10 '17 at 13:03

Alexander · Accepted Answer · 2017-05-10T13:30:40.537

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.

score 1 · Answer 2 · edited May 23 '17 at 12:34

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?.

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

2 Answers2