Jquery Autocomplete with custom CSS

Question

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 :

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.

Hi--you'll probably get a quicker/better response if you can create a demonstration at jsfiddle.net. — Tony Hinkle
– Tony Hinkle, Commented Sep 25, 2015 at 13:16
@TonyHinkle here : jsfiddle.net/hichamridouane/x67pkxve as u can see when jquery ui is disabled my css is OK, but once you check it my css stops working. — RidRoid
– RidRoid, Commented Sep 28, 2015 at 9:41

kamus · Accepted Answer · 2015-09-28 15:08:22Z

1

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/

edited Sep 28, 2015 at 15:08

answered Sep 25, 2015 at 15:21

kamus

7971 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

step Over a year ago

Hello, i hope to help First: You have the add style list-style:none in class the <ul> Second: The element icon is one button verify this element

RidRoid Over a year ago

+1 yes sir that missing style solved the first probleme , no bullets now :) for the second problem it is not a path problem, because the whole bloc .ui-autocomplete select {} seems to be not interpreted (even the background is white).

kamus Over a year ago

can you post your html?

kamus Over a year ago

i've included the example in the answer

RidRoid Over a year ago

@kamus your example (just like mine) works on fiddle only. i think when you enable jquery ui it just inherits some css or something...

|

Collectives™ on Stack Overflow

Jquery Autocomplete with custom CSS

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related