jQuery autoComplete 样式

jQuery UI 自动完成功能详解

最新推荐文章于 2022-04-08 15:27:55 发布

weixin_34410662

最新推荐文章于 2022-04-08 15:27:55 发布

阅读量668

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/turtlegood/p/3892353.html

本文详细介绍了如何使用 jQuery UI 的自动完成功能，并提供了关键的 CSS 样式设置，帮助开发者实现高效、美观的自动补全输入体验。

前提：使用了jQuery-ui

官网：http://jqueryui.com/autocomplete/

/*** autocomplete ***/
.ui-widget-content {
    background: #FFFFFF !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    padding-top: 5px;
    padding-bottom: 5px;
    width: auto !important;
}

.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 {
    /*border: 1px solid #FFF !important;
    background: #FFF !important;
    font-weight: normal !important;
    color: #FFF;*/
    border: 0px solid #FFF !important;
    background: #F34541 !important;
    color: white;
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857;
    white-space: nowrap;
}

.ui-menu-item {
    padding: 3px 20px !important;
}