سؤال

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.

هل كانت مفيدة؟

المحلول

Try this

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

نصائح أخرى

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; 
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: red;
  color:white
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top