autocomplete change css select using keyboard(arrow key)

Question

I try to change the css when a user selects a 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 only takes effect with a mouse event.

Answer 1

Here you go.

WORKING DEMO

The 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 this :

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;
}