Cambiare colore di sfondo della voce di completamento automatico jQuery in base allo stato (usando i CSS)

Question

L'obiettivo è quello di creare un elemento di completamento automatico JQuery i cui elementi elenco avere uno sfondo blu quando sono aleggiava o concentrati con la tastiera. La casella di ricerca di Facebook lo tira bene.

Ogni elemento <li> contiene HTML personalizzato avvolto in un <a>. Ognuno di questi <a> tag appartiene alla classe sbiAnchor. Generare lo sfondo blu al passaggio del mouse può essere fatto con successo utilizzando il seguente CSS:

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover{ 
    background: blue; 
} 

Ma come si applica lo stesso sfondo blu quando le chiavi utente su/giù la lista di completamento automatico. Il cambiamento del codice CSS nel seguente NON funziona:

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover, .ui-autocomplete .ui-state-focus a.ui-corner-all.sbiAnchor{ 
    background: blue; 
} 

Qual è l'approccio corretto qui? Tieni presente che questo effetto di sfondo blu dovrebbe applicarsi solo a un completamento automatico specifico sulla mia pagina (molti di questi esistono). Ecco perché sto usando sbiAnchor per differenziare i suoi elementi da quelli degli altri elementi di completamento automatico. Gli altri autocompleti dovrebbero mantenere il loro comportamento predefinito, quindi i selettori CSS non dovrebbero essere troppo ampi.

Answer 1

I campi di input, piuttosto che i tag di ancoraggio tengono messa a fuoco. Questo dovrebbe funzionare.

.ui-autocomplete-input:focus, .ui-autocomplete a.ui-corner-all.sbiAnchor:hover { 
    background: blue; 
} 

Answer 2

voluto un po 'per capirlo, ma il codice CSS corretta è:

.ui-menu .ui-menu-item a.sbiAnchor.ui-state-hover{ 
    background: blue; 
} 

Questo uccide due piccioni con una fava, fornendo uno sfondo blu sia per librarsi e selezione tramite su/giù le sequenze di tasti. L'elemento di completamento automatico jQuery tratta a quanto pare le sequenze di tasti su/giù come un'azione "hover", non una scelta o messa a fuoco.

Answer 3

Questo lavoro abbastanza facile

body .ui-autocomplete { 
    /* font-family to all */ 
} 

body .ui-autocomplete .ui-menu-item .ui-corner-all { 
    /* all <a> */ 
} 

body .ui-autocomplete .ui-menu-item .ui-state-focus { 
    /* selected <a> */ 
} 

Answer 4

il css di hover Become Form questa classe CSS

è possibile ignorare esso. per esempio:

.ui-state-focus { 
background: none !important; 
background-color: blue !important; 
border: none !important;} 

Answer 5

questo ha cambiato il colore hover per me.

.ui-menu-item .ui-menu-item-wrapper:hover 
{ 
    border: none !important; 
    background-color: #your-color; 
} 

Answer 6

ho cambiato il colore:

.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 { 
} 

Answer 7

Tale argomento vecchio, ma le soluzioni di cui sopra non hanno funzionato per me. Se sarei andato dritto in avanti, sarei stato molto più veloce a trovare una soluzione:

sovrascrittura nel foglio di stile personalizzato il seguente stile di jquery-ui.css

.ui-autocomplete { 
      border-radius: 0.25rem; 
      background-color: #eceff1; 
      padding: 0 0.6rem; 
      font-family: 'ptmono'; 
     .ui-menu-item { 
      border: 1px solid #eceff1; 
      border-radius: 0.25rem; 
      .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 { 
      background-color: #eceff1; 
      border-color: #eceff1; 
      color: #0d47a1; 
      } 
     } 
    } 

Invece di sfondo: nessuno! importante, puoi impostare lo sfondo in .ui-menu-item e nella classe attiva. Inoltre, invece di scrivere border: none importante si sovrascrive in entrambe le classi il colore del bordo con il colore di sfondo, ciò che impedisce un cambiamento di altezza e con un effetto che oscillazione.

Answer 8

ecco la risposta corretta: basta cambiare il "grigio" per il colore che si desidera

.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 { 
 
\t border: none!important; 
 
\t background: grey; 
 
\t font-weight: normal; 
 
\t color: #ffffff; 
 
}