根据状态更改 jQuery 自动完成项的背景颜色（使用 CSS）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14992827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change background color of jQuery autocomplete item based on state (using CSS)
提问by Chad Decker
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:
每个<li>元素都包含包装在<a>. 这些<a>标签中的每一个都属于类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 选择器不应太宽泛。
回答by Alejo JM
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> */
}
回答by Duha
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;}
回答by Mehdi Hadjar
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 {
}
回答by Starrover
This changed the hover color for me.
这改变了我的悬停颜色。
.ui-menu-item .ui-menu-item-wrapper:hover
{
border: none !important;
background-color: #your-color;
}
回答by Praveen Mitta
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;
}
回答by Alex Williams
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;
}
回答by Chad Decker
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 andselection via up/down keystrokes. The jQuery autocomplete element apparently treats the up/down keystrokes as a "hover" action, not a selection or focus.
这可以用一颗石头杀死两只鸟，通过向上/向下按键为悬停和选择提供蓝色背景。jQuery 自动完成元素显然将向上/向下键击视为“悬停”操作，而不是选择或焦点。
回答by Anja
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.
您可以在 .ui-menu-item 和活动类中设置背景，而不是 background: none !important。另外，不要写 border: none ！重要的是，你在两个类中都用背景色覆盖了边框颜色，防止高度变化和摆动效果。
回答by Wail
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;
}