11/2/2015 Select2 hover color with CSS - Stack Overflow

sign up log in tour help stack overflow careers

Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no
Take the 2-minute tour ×
registration required.
Stack Overflow requires external JavaScript from another domain,
Select2 hover color
which withorCSS
is blocked failed to load.

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.

css colors background-color jquery-select2

edited Jan 16 '14 at 17:03 asked Jan 16 '14 at 16:53

Revanka
28 1 5

look at the inspector to see where is that element being styled – jycr753 Jan 16 '14 at 16:55

What have you tried so far? You need to post some code. – disinfor Jan 16 '14 at 16:57

1 Answer

Try this

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

answered Jan 16 '14 at 17:01

wickywills
917 3 15

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! – Revanka Jan 16 '14 at 17:15

@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 :) – wickywills Jan 16 '14 at 17:19

http://stackoverflow.com/questions/21167941/select2-hover-color-with-css 1/1