jQuery autocomplete hover styling

Question

I'm trying to change the background colour of the autocomplete when an item is being hovered and I just can't get it to work. I managed to change the general background colour with .ui-menu-item a and have tried to use :hover , :focus , :active but none of them do the trick. Can anybody tell me what the right class is to do this?

CSS:

.ui-widget {
  font-size: 0.75em;
}
.ui-menu-item a {
  background-color: #fff;
}

Answer 1

Hovered autocomplete items get the class ui-state-focus applied, so you can target them via CSS with:

.ui-menu-item a.ui-state-focus {
/* your rules */
}

jsFiddle example

Note that newer versions of jQuery UI might need .ui-menu-item.ui-state-focus instead.

Answer 2

The only way I could get it to work was opening the developer tools in IE and seeing what was being called to change the colors. I found this:

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover 

so if I add this to my style sheet I am using to override classes (last style sheet to be loaded):

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover 
{
  border: 1px solid #000;
  background: #000;
}

seems to work well for me. You may need to close and reopen your browser after making the change.

I resorted to this as none of the other suggestions seemed to work for me. Posting this as it may help someone else who runs into the same issue..

Answer 3

In my case following code worked for me. Hopefully it helps someone.

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #6693bc !important;
    font-weight: bold !important;
    color: #ffffff !important;
}