CODEWITHSUNDEEP
javascriptjquerycssjquery-uijquery-autocomplete
RidRoid
RidRoid

Reputation: 961

Jquery Autocomplete with custom CSS

i'm working with the default autocomplete source code. Since i replaced the jquery-ui.css with my own css, I don't have the ability to drop down all the select box options and I don't know how to get rid of the bullets :

enter image description here

here is my css :

.ui-autocomplete {
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
overflow: hidden;
background: #eeeeee;
}

.ui-autocomplete select {
padding: 5px 8px;
width: 120px;
border: none;
box-shadow: none;
background: #eeeeee url("arrow.png") no-repeat 90% 50%;
-webkit-appearance: none;
}

.ui-autocomplete select:focus {
outline: none;

}

.ui-menu .ui-menu-item a.ui-corner-all:hover, .ui-menu .ui-menu-item a.ui-corner-all:focus, .ui-menu .ui-menu-item a.ui-corner-all:active {
background:#ff8a00!important;
color:#000;
border-radius:0;
}

 .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 {
background: #ff8a00;
border: none;
color:#000;
border-radius:0;
font-weight: normal;
}

thanks for your help guys.

Upvotes: 2

Views: 3120

Answers (1)

kamus
kamus

Reputation: 797

you are missing the .ui-menu style

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: none;
}

Verify the image path maybe is in other folder or just doesn't exists.

You can see a example here:

http://jsfiddle.net/x67pkxve/1/

Upvotes: 1

Related Questions