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的每一项的样式,这里我们使用了无序列表来适配每一项。
最后,我们还对选中的项、悬停的项做了样式变化的处理,让用户更加易于辨认自己的行为。
以上是一种样式的参考,根据实际需求可以进行相应的调整,以达到更加美观、用户友好的效果。