Autocomplete change css select using keyboard (arrow key)

Question

I am trying to change css when the user selects the result using the keyboard (arrow key).

.ui-menu .ui-menu-item a:hover, .ui-menu .ui-menu-item a:focus, .ui-menu .ui-menu-item a:active { background:#ff8a00!important; color:#000; border-radius:0; } 

However, this css takes effect with the mouse event.

Answer 1

Here you go.

WORKING DEMO

CSS:

 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background: #ff8a00; border: none; color:#000; border-radius:0; font-weight: normal; } 

Answer 2

try the following:

jsFiddle

 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus{ background: #ff8a00!important; color: #000; border-radius: 0; } 

Answer 3

I like this solution. But I asked myself what the weather is now, is it possible to change the background color of the link if the ui-menu element is hovered? It would be great to use this piece of code!