57

Fiddle

I'm trying to style the sections inside the AutoComplete, but I don't know what to put in the CSS for the sections. I'm specifically trying to make:

color: #96f226;
border-radius: 0px;
border: 1px solid #454545;

Any suggestions???

1

4 Answers 4

91

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/

3
  • 7
    Yes!!! Here is the finished program I have been asking most of my questions on. THANKS!
    – Joe Pigott
    Jul 24, 2013 at 15:47
  • 1
    for jquery-ui 1.12.1 Try : .ui-menu-item div.ui-state-active{//your styling here} Jun 19, 2018 at 15:01
  • Hi the second link is broken.
    – Steve
    Nov 12, 2020 at 7:10
77

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;
}
5
  • 3
    When using this with an input-field in the navbar, the width is initially wider than the searchbox. Setting "top: 0" solved this for me.
    – idleberg
    Oct 10, 2015 at 19:46
  • it's exactly like I wanted!
    – Caner
    Oct 2, 2016 at 14:55
  • Unless you don't mind a list that extends forever, i would throw a max-height: 50vh and an overflow-y: auto on there
    – gdbj
    Jan 22, 2018 at 15:22
  • Note, this is not limited to use with bootstrap. It uses the jQuery & jQuery3 classes
    – Jerome
    May 9, 2019 at 16:50
  • I'm wondering if there is a way to assign an html id to that list so that you can style multiple lists differently if on the same page.
    – Vočko
    Jul 16, 2019 at 7:06
0

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;
        }
    }

}
-5

You can overwrite the classes in your own css using !important, e.g. if you want to get rid of the rounded corners.

.ui-corner-all
{
border-radius: 0px !important;
}
1
  • 3
    Two remarks: You don't need to set a unit after 0. 0 is always 0. Second, setting !important isn't seen as good coding style. You'll probably run into a cascade where !important is unintendendly overwriting your styles later on.
    – Volker E.
    Jul 11, 2014 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.