jQuery: Remove ui-autocomplete styles from dropdown results

Question

I have a page that's using jquery's autocomplete and for the life of me I can't remove/modify the styles applied to the dropdown.

I'm using jquery-ui CSS from the google CDN, so i'm trying to avoid saving it locally and modify it :)

Using CSS, I have tried overriding the UL (.ui-autocomplete), the LI's (.ui-menu-item) and the anchor tags in the LI's - I got a lot of it to work, but there seems to be padding added after my CSS and also, when I move my mouse off a list item onto the next item, for a split second, the previous item has the default jquery-ui background (the grey gradient that is used in headers, such as dialog titlebar).
Anyone have css handy to reset the autocomplete styles?

* UPDATE * Link to fiddle:

[http://jsfiddle.net/HccBe/][1]

If you hover over one of the items, it highlights in blue. Then move your mouse to the left of it, but still within the dropdown box and you'll notice the blue goes away, but jquery's gradient background sticks around.

it is easier to play with the live example jsfiddle.net/L55pE — claustrofob
– claustrofob, Commented Jun 19, 2013 at 21:02
do you have a problem with styles or data? i added two values ['john', 'jack'] into the autocomplete source. Isn't enought to test the result? — claustrofob
– claustrofob, Commented Jun 20, 2013 at 14:40
OMG! Look carefully at the 3d comment, please. I added jsfiddle yesterday for you jsfiddle.net/L55pE — claustrofob
– claustrofob, Commented Jun 20, 2013 at 14:56

Losbear · Accepted Answer · 2013-06-25 12:48:22Z

11

Credit goes to Claustrofob for providing me the CSS to remove all styles off jquery-ui's autocomplete:

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active, 
.ui-autocomplete, .ui-autocomplete:hover, 
.ui-menu-item, .ui-menu-item:hover,
.ui-menu-item a, .ui-menu-item a:hover,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active,
.ui-menu .ui-menu-item a
{ background: #ffffff none no-repeat; 
padding:0;
margin:0;
display:block;
border:0;border-collapse:collapse;
}

answered Jun 25, 2013 at 12:48

Losbear

3,3231 gold badge34 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

jQuery: Remove ui-autocomplete styles from dropdown results

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related