Jquery 使用自定义自动完成 CSS

Question

我正在使用 default autocomplete source code。由于我用我自己的 css 替换了 jquery-ui.css，我无法下拉所有 select 框选项，而且我不知道如何去掉项目符号:

这是我的 css :

.ui-autocomplete {
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
overflow: hidden;
background: #eeeeee;
}

.ui-autocomplete select {
padding: 5px 8px;
width: 120px;
border: none;
box-shadow: none;
background: #eeeeee url("arrow.png") no-repeat 90% 50%;
-webkit-appearance: none;
}

.ui-autocomplete select:focus {
outline: none;

}

.ui-menu .ui-menu-item a.ui-corner-all:hover, .ui-menu .ui-menu-item a.ui-corner-all:focus, .ui-menu .ui-menu-item a.ui-corner-all:active {
background:#ff8a00!important;
color:#000;
border-radius:0;
}

 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
background: #ff8a00;
border: none;
color:#000;
border-radius:0;
font-weight: normal;
}

感谢你们的帮助。

Answer 1

您缺少 .ui-menu 样式

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: none;
}

确认图像路径可能在其他文件夹中或根本不存在。

你可以在这里看到一个例子：

http://jsfiddle.net/x67pkxve/1/

Jquery 使用自定义自动完成 CSS

Jquery Autocomplete with custom CSS

javascript

css

jquery

jquery-ui

jquery-autocomplete