JQuery Autocomplete highlight

Question

I have looked around and seen a lot of questions/answers about styling autocompletes. My question/issue involves the styling of the highlight when hovering over one of the menu-items I have tried multiple combinations similarly suggested in other posts to no avail.

.ui-autocomplete.source:hover {
    background: #454545;
}

.ui-autocomplete .ui-menu .ui-menu-item:hover{
    background: #0039a6;
}

.ui-menu .ui-menu-item a{
    color: #96f226;
    border-radius: 0px;
    border: 1px solid #454545;
}

.ui-autocomplete li.ui-menu-item:hover {
    background: #0039a6;
}

.ui-state-hover, .ui-autocomplete li:hover{
    color:White;
    background:#96B202;
    outline:none;
}

Do I need to modify the class(es) being modified? Is it modifying the wrong state? Does the syntax need to be modified?

Answer 1

The version of jquery-autocomplete I am using, I just need to set this style.

.ui-autocomplete .ui-menu-item a.ui-state-focus {
      background: #C4FFC4 !important;
      border: 1px solid #32BE61 !important;
}

Because when you hover an item the jQuery adds the style "ui-state-focus" to the link.

Answer 2

This example is the only way I could get it to work in Edge (while bolding the search term).

.ui-menu .ui-menu-item:hover {
display: block;
text-decoration: none;
color: #3D3D3D;
cursor: pointer;
background-color: lightgray;
background-image: none;
border: 1px solid lightgray;
}