自定义 jquery 自动完成组合框 css答案

【问题标题】：Customize jquery autocomplete combobox css自定义 jquery 自动完成组合框 css
【发布时间】：2014-07-16 17:55:41
【问题描述】：

如何自定义 jquery 自动完成组合框 css 以便我可以让它看起来像在图片中以更改其悬停样式？

我的部分代码是

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
.ui-autocomplete, .ui-autocomplete:hover,
.ui-menu-item, .ui-menu-item:hover,
.ui-menu-item a, .ui-menu-item a:hover,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active,
.ui-menu .ui-menu-item a {
    background-color: white;
    text-wrap: none;
    font-weight: normal;
    color: black;
}

.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* support: IE7 */
*height: 1.7em;
*top: 0.1em;
width: 40px;
color: white;
border: thin;
border-color: blue;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    position: absolute;
    font-style: normal;
}

图片：现有外观

【问题讨论】：

你是说蓝色焦点？
蓝色焦点和白色字体颜色
你身边有jquery-ui.css吗？
是的，包含jquery-ui.css

标签： jquery css autocomplete hover

【解决方案1】：

您必须更改 .ui-state-focus 的 CSS。好吧，这对你有用：

.ui-autocomplete .ui-menu-item {
  background:white;
}
.ui-autocomplete .ui-state-focus {
    background:rgb(39, 108, 255); //Change blue color to your favourite shade
    color:white;
}

JSFiddle Demo

【讨论】：

@learning 我没听懂你……你这么说是什么意思？你的 CSS 有冲突吗？
@learning 如果这不起作用，您可能在其他地方遇到问题，否则您将得到它...
请在上面找到附图，它没有覆盖现有的ui css
你似乎有一个list-style-image。您需要设置为none。如果没有实际看到那里的内容，就很难修改你的 CSS。仅仅添加图像并没有帮助。可以加个 JSfiddle 吗？
@learning 您在 HTML 部分中再次包含jquery-ui.css，它将优先于 CSS，位于为 CSS 提供的右侧空间。所以现在看看jsfiddle.net/Bn65y/6 fiddle...它正在工作。在 JSFiddle 中，请尝试使用所需的部分 HTML for HTML、CSS for CSS 和 JS for JS...