customizing the drop down autocomplete box

Question

I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.

I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.

I'v based mine off this one.

<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">

Altruistic

Some more of the code you are having trouble with would be helpful. – Disinter

Answer 1

In order to avoid using !important you could add your styles with jQuery and override them in that way.

$('ul.ui-autocomplete').css({
    color: 'red'
});

Another solution would be to remove the style attribute from the ul.

$('ul.ui-autocomplete').removeAttr('style');

Roop

Answer 2

Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.

Ex.

ul.ui-autocomplete {
color: red !important;
}

The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.

The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.

Caught

Answer 3

Try to add margin-top and margin-left in your css

Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.

Noami

Answer 4

I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.

http://docs.jquery.com/UI/Menu#theming

You will be able to customize the look and feel of your dropdown in these class.

«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.

Platitudinous

Answer 5

try using position or append to option... you can refer here...

http://jqueryui.com/demos/autocomplete/#option-position

Figurate

Answer 6

Check out the file jquery.ui.theme.css,

the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.

Abreu