Styling JQuery UI Autocomplete Styling JQuery UI Autocomplete jquery jquery

Styling JQuery UI Autocomplete


Are you looking for this selector?:

.ui-menu .ui-menu-item a{    background:red;    height:10px;    font-size:8px;}

Ugly demo:

http://jsfiddle.net/zeSTc/

Just replace with your code:

.ui-menu .ui-menu-item a{    color: #96f226;    border-radius: 0px;    border: 1px solid #454545;}

demo: http://jsfiddle.net/w5Dt2/


Bootstrap styling for jQuery UI Autocomplete

    .ui-autocomplete {    position: absolute;    top: 100%;    left: 0;    z-index: 1000;    float: left;    display: none;    min-width: 160px;       padding: 4px 0;    margin: 0 0 10px 25px;    list-style: none;    background-color: #ffffff;    border-color: #ccc;    border-color: rgba(0, 0, 0, 0.2);    border-style: solid;    border-width: 1px;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);    -webkit-background-clip: padding-box;    -moz-background-clip: padding;    background-clip: padding-box;    *border-right-width: 2px;    *border-bottom-width: 2px;}.ui-menu-item > a.ui-corner-all {    display: block;    padding: 3px 15px;    clear: both;    font-weight: normal;    line-height: 18px;    color: #555555;    white-space: nowrap;    text-decoration: none;}.ui-state-hover, .ui-state-active {    color: #ffffff;    text-decoration: none;    background-color: #0088cc;    border-radius: 0px;    -webkit-border-radius: 0px;    -moz-border-radius: 0px;    background-image: none;}


Based on @md-nazrul-islam reply, This is what I did with SCSS:

ul.ui-autocomplete {    position: absolute;    top: 100%;    left: 0;    z-index: 1000;    float: left;    display: none;    min-width: 160px;    margin: 0 0 10px 25px;    list-style: none;    background-color: #ffffff;    border: 1px solid #ccc;    border-color: rgba(0, 0, 0, 0.2);    //@include border-radius(5px);    @include box-shadow( rgba(0, 0, 0, 0.1) 0 5px 10px );    @include background-clip(padding-box);    *border-right-width: 2px;    *border-bottom-width: 2px;    li.ui-menu-item{        padding:0 .5em;        line-height:2em;        font-size:.8em;        &.ui-state-focus{            background: #F7F7F7;        }    }}