Zmienianie koloru tła elementu autouzupełniania jQuery na podstawie stanu (przy użyciu CSS)

Question

Celem jest utworzenie elementu autouzupełniania JQuery, którego elementy listy mają niebieskie tło, gdy są one przesuwane lub ustawiane za pomocą klawiatury. Pole wyszukiwania na Facebooku ładnie to ładuje.

Każdy element <li> zawiera niestandardowy kod HTML zawinięty w <a>. Każdy z tych tagów <a> należy do klasy sbiAnchor. Generowanie niebieskim tle przy aktywowaniu można zrobić z powodzeniem stosując następujący CSS:

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

Ale w jaki sposób można zastosować ten sam niebieskie tło gdy klawisze użytkowników w górę/w dół listy autouzupełniania. Zmiana kodu CSS na NIE DZIAŁA:

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

Jakie jest właściwe podejście? Pamiętaj, że ten niebieski efekt tła powinien dotyczyć tylko jednego autouzupełniania na mojej stronie (kilka z nich istnieje). Właśnie dlatego używam sbiAnchor do rozróżniania jego elementów od elementów innych autouzupełniania. Pozostałe autouzupełniania powinny zachować domyślne zachowanie, więc selektory CSS nie powinny być zbyt szerokie.

Answer 1

Pola wprowadzania zamiast znaczników zakotwiczeń utrzymują ostrość. To powinno działać.

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

Answer 2

Zajęło to trochę czasu, aby zrozumieć to, ale prawidłowy kod CSS:

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

To zabija dwie pieczenie na jednym ogniu, zapewniając niebieskim tłem dla obu najechaniu i wybór poprzez górę/naciśnięcia klawiszy. Element autouzupełniania jQuery najwyraźniej traktuje klawisze strzałek w górę/w dół jako akcję "najeżdżania", a nie selekcję czy fokus.

Answer 3

Ta praca dość łatwe

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

css hover stać utworzenia tej klasy CSS

można go override. na przykład:

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

Answer 5

ten zmienił kolor aktywowania dla mnie.

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

Answer 6

Zmieniłem kolor przez:

.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

taki stary temat, ale rozwiązania powyżej nie pracowali dla mnie. Jeśli bym poszedł prosto do przodu, byłbym o wiele szybciej w znalezieniu rozwiązania:

nadpisywania w niestandardowych stylów dodaje styl 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; 
      } 
     } 
    } 

Zamiast tła: none! ważne, możesz ustawić tło w .ui-menu-item oraz w aktywnej klasie. Dodatkowo zamiast zapisywania obramowania: none! Important nadpisujesz w obu klasach kolor obramowania z kolorem tła, co zapobiega zmianie wysokości i efektowi chybotania.

Answer 8

tutaj jest prawidłowa odpowiedź: wystarczy zmienić "szary" przez kolor chcesz

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