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

The goal is to create a JQuery autocomplete element whose list items have a blue background when they're hovered over or focused via the keyboard. The Facebook search box pulls this off nicely.

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

Each <li> element contains custom HTML wrapped in an <a>. Each of those <a> tags belongs to the class sbiAnchor. Generating the blue background on hover can be done successfully using the following CSS:

每个

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

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

But how does one apply that same blue background when the user keys up/down the autocomplete list. Changing the CSS code to the following does NOT work:

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

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

What's the correct approach here? Keep in mind that this blue background effect should only apply to one specific autocomplete on my page (several of them exist). That's why I'm using sbiAnchor to differentiate its items from those of the other autocomplete elements. The other autocompletes should retain their default behavior so the CSS selectors shouldn't be too broad.

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

9 个解决方案

#1

This work quite easy

这项工作很容易

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> */
}

#2

the css of hover become form this css class

悬停的CSS变成了这个css类

you can override it . for example:

你可以覆盖它。例如:

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

#3

This changed the hover color for me.

这改变了我的悬停颜色。

.ui-menu-item .ui-menu-item-wrapper:hover
{
    border: none !important;
    background-color: #your-color;
}

#4

I've changed the color by:

我改变了颜色:

.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 {
}

#5

Input fields rather than anchor tags hold focus. This should work.

输入字段而非锚标记保持焦点。这应该工作。

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

#6

Took a while to figure it out but the correct CSS code is:

花了一段时间来弄明白,但正确的CSS代码是:

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

This kills two birds with one stone, providing a blue background for both hover and selection via up/down keystrokes. The jQuery autocomplete element apparently treats the up/down keystrokes as a "hover" action, not a selection or focus.

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

#7

Such an old topic, but the solutions above haven't worked for me. If I would have gone straight forward, I would have been much faster in finding a solution:

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

Overwrite in your custom stylesheet the following style of jquery-ui.css

在自定义样式表中覆盖以下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;
            }
        }
    }

Instead of background: none !important, you can set the background in .ui-menu-item and in the active class. Additionally instead of writing border: none !important you overwrite in both classes the border color with the background color, what prevents a change of the height and with that a wobble effect.

而不是background:none!important,您可以在.ui-menu-item和活动类中设置背景。另外,不要写边框:无!重要的是你在两个类中用背景颜色覆盖边框颜色,什么阻止高度的改变和摆动效果。

#8

I used above answers and tweaked little bit to work for my scenario (Hovering styling for JQuery autocomplete items). Hopefully this helps someone.

我使用了上面的答案并稍微调整一下来为我的场景工作(为JQuery自动完成项目悬停样式)。希望这有助于某人。

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

#9

here is the correct answer: just change the "grey" by the color you want

这是正确的答案:只需按您想要的颜色更改“灰色”

.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;
}