根據狀態（使用CSS）更改jQuery自動完成項目的背景顏色

Question

目標是創建一個JQuery自動完成元素，其列表項目在通過鍵盤盤旋或聚焦時具有藍色背景。 Facebook的搜索框很好地解決了這個問題。

每個<li>元素包含包裝在<a>中的自定義HTML。這些<a>標籤中的每一個都屬於sbiAnchor類別。生成懸停在藍色背景可以成功使用以下CSS來實現：

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

但如何申請一個同樣藍色的背景，當用戶按鍵向上/向下自動完成列表。將CSS代碼更改爲以下代碼不起作用：

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

這裏的正確方法是什麼？請記住，這種藍色背景效果應該僅適用於我的網頁上的一個特定自動填充（其中有幾個存在）。這就是爲什麼我使用sbiAnchor來區分其他自動完成元素的項目。其他autocompletes應保留其默認行爲，所以CSS選擇器不應該太寬泛。

Answer 1

輸入字段而不是錨點標記保持焦點。這應該工作。

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

Answer 2

了好一會兒才弄明白，但正確的CSS代碼：

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

這二鳥一石，進而爲藍色背景懸停，並通過了選擇/向下按鍵。 jQuery自動完成元素顯然將上/下擊鍵視爲「懸停」動作，而不是選擇或焦點。

Answer 3

這項工作很容易

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懸停成爲形成這個CSS類

你可以覆蓋它。 例如：

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

Answer 5

這改變了我懸停的顏色。

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

Answer 6

我已經改變了顏色：

.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

這樣一個老話題，但上述方案都沒有爲我工作。如果我會去直線前進，我會一直更快找到解決辦法：

覆蓋您的自定義樣式表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; 
      } 
     } 
    } 

取而代之的背景：沒有！重要的是，您可以在.ui-menu-item和active類中設置背景。此外，不用寫邊框：無！重要的是，您可以在兩個類中都覆蓋邊框顏色與背景顏色，防止高度發生變化以及擺動效果。

Answer 8

這裏是正確的答案：只是你想要改變 「灰色」 的色彩

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