web-dev-qa-db-ja.com

状態に基づいてjQueryオートコンプリートアイテムの背景色を変更（CSSを使用）

目標は、キーボードでホバーしたりフォーカスしたりしたときにリストアイテムの背景が青色になる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を使用して、そのアイテムを他のオートコンプリート要素のアイテムと区別しています。その他のオートコンプリートはデフォルトの動作を維持する必要があるため、CSSセレクターが広すぎないようにする必要があります。

jquerycssbackgroundjquery-autocomplete
11
Chad Decker

この作業は非常に簡単です

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> */
}
23
Alejo JM

ホバーのCSSは、このCSSクラスになります enter image description here

あなたはそれを上書きすることができます。例えば：

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

これにより、ホバーの色が変わりました。

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

色を変更しました：

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

私は上記の回答を使用して、私のシナリオ（JQueryオートコンプリートアイテムのホバーリングスタイル）に合わせて少し調整しました。うまくいけば、これは誰かを助けます。

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #6693bc !important;
    font-weight: bold !important;
    color: #ffffff !important;
}
1
Praveen Mitta

アンカータグではなく入力フィールドがフォーカスを保持します。これは動作するはずです。

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

それを理解するのにしばらくかかりましたが、正しいCSSコードは次のとおりです。

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

これは、1つの石で2羽の鳥を殺し、両方のホバーに青い背景を提供しますおよびアップ/ダウンキーストロークによる選択。 jQueryのオートコンプリート要素は、上下のキーストロークを「ホバー」アクションとして扱い、選択やフォーカスではないようです。

0
Chad Decker

このような古いトピックですが、上記の解決策ではうまくいきませんでした。私がまっすぐ進んだとしたら、私は解決策を見つけるのがはるかに速くなったでしょう：

カスタムスタイルシートで、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とアクティブクラスに設定できます。さらに、ボーダーを書く代わりに：なし！両方のクラスでボーダーの色を背景色で上書きすることが重要です。これにより、高さの変更が妨げられ、ウォブル効果が生じます。

0
Anja

これが正解です。「グレー」を好きな色に変更してください

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