Remove blue color of options when click on multiselect selection

Question

I have selectbox with multiple attribute,

<select multiple class="test">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Options give a blue background color when focus on one of them (not on mouse over; on click or select an option). on hover I can change background-color. But I don't no how can I change selected item background-color.

here is my css. I test checked, focus, active events,

.test option:hover {
  background-color: #ccc;
}
.test option:checked {
  background-color: #ddd
}
.test option:focus {
  background-color: #ddd
}
.test option:active {
  background-color: #ddd
}

also I test ::selection but it doesn't seems works;

::selection {
  background-color: red
}

I try to do it with jquery:

$('.test option').click(function() {
  $(this).css('background-color', 'red');
})

but click event doesn't on select event of option.

Does this answer your question? [CSS :selected pseudo class similar to :checked, but for — Awais, Dec 30 '19 at 11:42
@Awais No, I edit my code. This question answer doesn't help me. — Mr Kaaf, Dec 30 '19 at 11:48

score 0 · Answer 1 · answered Dec 30 '19 at 11:53

0

You can do this

.test option {
        background-color:red;
}

Or you can do following

select option {
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}

answered Dec 30 '19 at 11:53

Abu Sufian

991
1
6
15

It doesn't what I want. when you click on a option you see it with blue background. I wanna to change this color. – Mr Kaaf Dec 30 '19 at 11:56

Awais · Answer 2 · 2019-12-30T12:05:48.603

0

You will not be able to change the highlight color (when you hover) by using CSS!

You have few options:

Is to convert select into ul, li kind of select and do anything you want with this.
Use libraries like Choosen, Select2 or jQuery Form Styler . These allow you to style in much more broad and cross-browser way.

edited Dec 30 '19 at 12:05

answered Dec 30 '19 at 11:57

Awais

4,752
4
17
40

No, I don't looking for this. first of all I use multiselect, not select. second still whin you move mouse on a option you see blue color. – Mr Kaaf Dec 30 '19 at 12:02
@MrKaaf Got it now, updated my ans have a look please – Awais Dec 30 '19 at 12:06

score 0 · Answer 3 · edited Dec 30 '19 at 15:03

0

Your jquery would be like this:

$('select.test option').click(function() {
   $(this).css('background-color', 'red');
});

edited Dec 30 '19 at 15:03

br.julien

3,420
2
23
44

answered Dec 30 '19 at 12:08

Arijit Jana

220
1
4

score 0 · Answer 4 · answered Dec 30 '19 at 12:46

0

Can you try this

$( ".test option" ).focus(function() { $(this).css('background-color', 'red'); });

answered Dec 30 '19 at 12:46

Lokesh Suman

493
5
14

Remove blue color of options when click on multiselect selection

4 Answers4