jquery - jQueryUI オートコンプリートの選択 - スタイリングの問題

Question

jQueryUI を使用して生成されたオートコンプリート リストのスタイルを設定しようとしています。選択が行われると入力フィールドに表示されるテキストのスタイルをうまく設定できますが、可能な値のリストを同じ方法でスタイル設定することはできません。ここでJSFiddle 。

入力フィールドに「ap」または「boo」と入力します。「ap」が特定のフォントとオレンジ色でスタイル設定されていることがわかります。これは私が望むものです - 下のスクリーンショットを参照してください。ただし、表示される可能性のある値のリストは、標準の jQuery CSS によってスタイル設定されており、それをオフにすることはできないようです。Chrome の開発者ツールを使用して、変更する必要がある CSS クラスはui-autocomplete-inputだと思いますが、それを変更しても違いはありませんか?

JS:

$(function () {
    var availableIndustries = [
        "apparel",
        "books"];
    $("#industry-list").autocomplete({
        source: availableIndustries
    });
});

$(document).ready(function () {

    $("input[type=image]")
        .button()
        .click(function (event) {

        var constants = {
            'apparel': 'apparel.pdf',
                'books': 'publishing.pdf'
        };
    });
});

CSS:

    .ui-state-default { background:none; border:none; }
    .ui-state-hover { background:none; border:none; }
    .ui-widget input { font-family:'Istok Web', sans-serif; font-size: 16px; color: #DD4814;}
    .go_button { position: relative; top: 12px; }

Answer 1

これらのクラス「.ui-state-focus」および「.ui-menu-item a」の css をオーバーライド/編集する必要があります。以下は css をオーバーライドします。

.ui-menu-item a{ font-family:'Istok Web', sans-serif; font-size: 16px; color: #DD4814;}

    .ui-state-focus{
        background:none!important;
        border:none!important;
        font-family:'Istok Web', sans-serif!important;
        font-size: 16px!important;
        color: #DD4814!important;
    }

既存の CSS を編集し、クラス名「.ui-state-focus」を見つけて、背景プロパティを削除し、別のスタイル プロパティを追加します。