根据状态更改jQuery自动完成项的背景颜色（使用CSS）

Question

目标是创建一个JQuery自动完成元素，当它们悬停在上面或通过键盘聚焦时，其列表项具有蓝色背景。 Facebook搜索框很好地解决了这个问题。

每个<li>元素都包含<a>中包含的自定义HTML。这些<a>标记中的每一个都属于类sbiAnchor。使用以下CSS可以成功完成悬停时生成蓝色背景：

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover{
    background: blue;
}

但是当用户按下/关闭自动完成列表时，如何应用相同的蓝色背景。将CSS代码更改为以下代码不起作用：

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover, .ui-autocomplete .ui-state-focus a.ui-corner-all.sbiAnchor{
    background: blue;
}

这里的正确方法是什么？请记住，此蓝色背景效果应仅适用于我页面上的一个特定自动填充（其中一些存在）。这就是我使用sbiAnchor将其项目与其他自动完成元素区分开来的原因。其他自动复合应保留其默认行为，因此CSS选择器不应过宽。

Answer 1

这项工作非常简单

body .ui-autocomplete {
  /* font-family to all */
}

body .ui-autocomplete .ui-menu-item .ui-corner-all {
   /* all <a> */
}

body .ui-autocomplete .ui-menu-item .ui-state-focus {
   /* selected <a> */
}

Answer 2

悬停的css成为这个css类的形式

你可以覆盖它。 例如：

.ui-state-focus {
background: none !important;
background-color: blue !important;
border: none !important;}

Answer 3

这改变了我的悬停颜色。

scrapy crawl dmoz>test.txt

Answer 4

我改变了颜色：

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
}

Answer 5

输入字段而不是锚标记可以保持焦点。这应该有用。

.ui-autocomplete-input:focus, .ui-autocomplete a.ui-corner-all.sbiAnchor:hover {
    background: blue;
}

Answer 6

我使用了以上答案，并做了一些调整以适合我的情况（将样式设置为JQuery自动完成项）。希望这对某人有帮助。

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #6693bc !important;
    font-weight: bold !important;
    color: #ffffff !important;
} 

Answer 7

花了一段时间来搞清楚，但正确的CSS代码是：

.ui-menu .ui-menu-item a.sbiAnchor.ui-state-hover{
    background: blue;
}

这可以一石二鸟，通过上/下击键为悬停和选择提供蓝色背景。 jQuery自动完成元素显然将上/下键击视为“悬停”操作，而不是选择或焦点。

Answer 8

这么古老的话题，但上面的解决方案对我没用。如果我能够直接前进，我会更快找到解决方案：

在自定义样式表中覆盖以下样式的jquery-ui.css

.ui-autocomplete {
            border-radius: 0.25rem;
            background-color: #eceff1;
            padding: 0 0.6rem;
            font-family: 'ptmono';
        .ui-menu-item {
            border: 1px solid #eceff1;
            border-radius: 0.25rem;
            .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active,
    a.ui-button:active,
    .ui-button:active,
    .ui-button.ui-state-active:hover {
            background-color: #eceff1;
            border-color: #eceff1;
            color: #0d47a1;
            }
        }
    }

而不是background：none！important，您可以在.ui-menu-item和活动类中设置背景。另外，不要写border：none！important，你在两个类中用背景颜色覆盖边框颜色，防止高度变化和摆动效果。

Answer 9

使用.ui-menu-item和ui-menu-item-wrapper.ui-state-active：

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: #f5f5f5 !important; 
  border: solid 1px transparent; 
}

Answer 10

这是正确的答案：只需将颜色改为“灰色”

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: none!important;
	background: grey;
	font-weight: normal;
	color: #ffffff;
}