0

我正在尝试设置使用 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; }
4

2 回答 2

0

嗨，您必须将所需的 css 应用于以下类 .ui-menu-item { font-family:'Istok Web', sans-serif; 字体大小：16px；颜色：#DD4814;}

于 2013-11-06T11:52:59.353 回答
0

您必须为这些类“.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”删除背景属性并添加额外的样式属性作为单独的。

于 2013-11-06T12:00:39.277 回答