淘先锋技术网

首页 1 2 3 4 5 6 7

Jquery Autocomplete是一种非常实用的Javascript组件,可以用来快速地创建搜索框。除了其基本功能以外,我们还可以通过CSS样式来美化这个组件。

/*样式代码*/
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
padding: 0;
margin-top: 3px;
border-radius: 2px;
border-width: 1px;
border-style: solid;
border-color: #ccc;
background-color: #fff;
z-index: 1000;
}
.ui-menu-item {
list-style: none;
padding: 3px;
margin: 0;
cursor: pointer;
}
.ui-state-focus,
.ui-state-active {
background-color: #f5f5f5;
}
.ui-helper-hidden-accessible {
display: none;
}

在这段代码中,我们首先定义了Autocomplete下拉菜单的通用样式,包括了位置、内边距、边框粗细、颜色等。然后定义了Autocomplete的每一项的样式,这里我们使用了无序列表来适配每一项。

最后,我们还对选中的项、悬停的项做了样式变化的处理,让用户更加易于辨认自己的行为。

以上是一种样式的参考,根据实际需求可以进行相应的调整,以达到更加美观、用户友好的效果。