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

Posted 2023-02-24

【中文标题】jQueryUI 自动完成选项 - 样式问题

【英文标题】：jQueryUI autocomplete choices - styling issue

【发布时间】：2013-11-06 11:39:25

【问题描述】：

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

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

【问题讨论】：

覆盖/编辑这些类“.ui-state-focus”和“.ui-menu-item a”的css

【参考方案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”删除背景属性并添加额外的样式属性作为单独的。

【参考方案2】：

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