different background color on hover and on arrow key navigation in jquery ui autocomplete

Question

I have made a jsfiddle with my problem.

Link to my jsfiddle

The problem is, I get my desire background hover color while using mouse to hover over the list. However, when I use arrow key to navigate, jquery ui default theme color comes into effect. This creates two set of background colors, one using mouse and another using arrow keys. I have tried to use

.ui-menu-item .ui-menu-item-wrapper:focus 

but to no success. I'm using jquery ui 1.12.1 and jquery 1.10.2. How do I have my desire background color and text color on both events?

Thanks in advance.

Answer 1

I have found the classes that is responsible for this. Looking into the jquery ui theme roller's css file gave me the clue.

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid #aaaaaa;
    background: #cfd8e0;
    font-weight: normal;
    color: #212121;
}

Now I have same effect on hovering or navigating through the list using arrow keys.