Select2 hover color with CSS

Question

I've been trying to change the default blue hover color to something different in the Select2 elements in the website I'm designing, but no success so far. What's the correct, working css selector which would allow me to change the background color and font color of the hovered choice in the Select2 elements? Thank you in advance!

Edit:

.select2-drop:hover {
background-color: #efefef;
}

I've tried .select2-container, choice but no success. The added code changes the whole dropdown color on hover, but I need it to only change the hovered option.

Lindstrom

look at the inspector to see where is that element being styled – Pinnatifid

Answer 1

Try this

.select2-results .select2-highlighted {
    background: #f00;
    color: #fff;
}

Iatrics

Thank you, it worked! I thought I would need to include the :hover in the selector, that's why it didn't work before. Now it does and it looks cool! – Lindstrom

@Revanka - Good to hear! For the record, I'd never actually heard of select2 before. I just used Chrome developer tools to find out what to change. Developer tools is your friend :) – Iatrics

Answer 2

You can use this to change the hover color, works for the Select2 V4.0.1

.select2-container--default .select2-results__option--highlighted[aria-selected] {
     background-color: #F0F1F2;
     color: #393A3B; 
}

Extrasystole

This is correct, according to the order of your .css file you might need to use !important , or changing the order of your files. – Gipsy

This works, but it was being overridden by the default color. I added body to the start of the selector and now it works without "!important" rules. Like this: body .select2-container--default .select2-results__option--highlighted[aria-selected] – Cawthon

This is the correct way for the latest version of select2 – Philippic

Answer 3

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: red;
  color:white
}

Oden

Please use 4 spaces in front of the code to format it as code. – Peridot

This works for me, I'm using select2 v4.0.6-rc.0 With this we can change de background color of hover option – Vest