Autocomplete change css select using keyboard (arrow key)

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.

enter image description here

+6
source share
3 answers

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; } 
+20
source

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; } 
+2
source

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!

-1
source

Source: https://habr.com/ru/post/958756/


All Articles