jQuery UI 自动完成结果中的样式链接

Question

我已经阅读了很多关于 jQuery UI 自动完成样式的问题，但是我仍然有一个我无法解决的问题。我正在创建这样的自定义渲染：

$('.license-input').autocomplete({
    source: "{{url(LaravelLocalization::getCurrentLocale().'/ajax/license')}}",
    minLength: 2,
    delay: 250
}).autocomplete('instance')._renderItem = function( ul, item ) {
    return $('<li>')
            .append('<a href="' + item.url + '">' + item.name + '</a>')
            .appendTo(ul);
};

所以我的 <li> 项包含 links.

现在我想设置下拉菜单的样式，并使用以下 CSS（为了可见性，我夸大了颜色）：

ul.ui-autocomplete li
{
    border:none;
    background-color:#f505f5;
    padding:10px 16px;
    font-size:12px;
    outline:0;
}

ul.ui-autocomplete li:hover
{
    background-color:#05e5e5;
}

ul.ui-autocomplete li a
{
    border:none;
    background-color: #f505f5;
}

ul.ui-autocomplete li:hover a
{
    border:none;
    background-color: #05e5e5;
}

但是，links 没有设置样式。最让我困惑的是我在 Chrome 的调试器中检查结果时看到的内容：

您可以看到活动 <a> 元素的计算样式为蓝色，但项目本身具有白色背景。我应该设计的这个白色东西是什么？

我已经尝试过各种选择器，例如 .ui-state-active、.ui-state-hover、ui-state-focus、ul.ui-autocomplete li a:hover 等。

注意：ul.ui-autocomplete li:hover a 中的 border: none; 规则实际上得到应用 - 没有它样式看起来不同（link 周围有 1px 黑色边框）。所以唯一的问题是背景。

Answer 1

列表项中的 link 似乎设置了 background-image。这将覆盖您使用的任何背景颜色。

您可以为特定 link

设置 background-image: none

类似于：

ul.ui-autocomplete li:hover a
{
    border:none;
    background-color: #05e5e5;
    background-image: none;
}

link 有背景图片和无背景图片的示例： https://jsfiddle.net/yuwhuwkz/1/

jQuery UI 自动完成结果中的样式链接

Styling links in jQuery UI autocomplete results

css

jquery-ui

jquery-ui-autocomplete