jQueryUI自动完成选择 - 样式问题

Question

我正在尝试设置使用jQueryUI生成的自动完成列表的样式。一旦做出选择，我可以成功地设置输入字段中显示的文本的样式，但是无法以相同的方式设置可能值的列表的样式。 JSFiddle here。

在输入字段中输入“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

您好，您必须将所需的CSS应用于下一课程 .ui-menu-item {font-family：'Istok Web'，sans-serif; font-size：16px;颜色：＃DD4814;}

Answer 2

你必须覆盖/编辑这些类的css“.ui-state-focus”和“.ui-menu-item a” 下面是覆盖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”删除背景属性，并为其单独添加其他样式属性。