Hover, focus style on query suggestion <li>

Open Q&A
#1

Hi all,

I have a custom highlight for my query suggestions. They display as <li> elements. But for some reason I can’t seem to change the background color as a person arrows down through the list of suggestions. I’ve tried:

li {
			padding: 15px;
			&:focus,
			&:hover,
			&:active {
				background: $vallightblue;
			}
}

But that doesn’t seem to do the trick. Any help would be greatly appreciated.

Thanks,
Brent

#2

which query suggestions is that @brent.miller? Do you have this in a live site? It’s possible that the style doesn’t come from :active and :hover, but from a separate classname that also takes the keyboard in account, but that will depend on which dropdown you’re using

#3

Hi Haroen,

Yes, I figured it out. I was able to override it by targeting this class:

.react-autosuggest__suggestion–highlighted {

background: #c6c6c6;

}

Thanks,

Brent

1 Like
#4

Glad you found the class!