How to modify the layout of jQuery UI autocomplete combobox


Tags: jquery,css,jquery-ui,jquery-ui-autocomplete

Problem :

I'm using the jQuery UI autocomplete combobox and want to modify the layout of the combobox, for example the height/width of the text field/toggle button and font size/color of the input text, but I do not know how to specify the class in CSS.

For now, I'm only using .ui-autocomplete-input to change the height/width of the text field. Can anyone tell me how to modify other elements of the combobox?



Solution :

In their demo, http://jqueryui.com/resources/demos/autocomplete/combobox.html
they list the following styles within the head:

.custom-combobox {
    position: relative;
    display: inline-block;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    /* support: IE7 */
    *height: 1.7em;
    *top: 0.1em;
}
.custom-combobox-input {
    margin: 0;
    padding: 0.3em;
}

You can view all of the classes used by jquery ui here: http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css


    CSS Howto..

    how to grow height with the amount of text in css?

    Whats a good way to show large background images on css

    Generated web font doesn't show dots above Ü

    DotNetNuke Skinning: How do I use\add skin.css?

    How to show CSS transitions only on hover?

    how to center text html css

    Show outlines around divs in a web-based HTML editor, a la Dreamweaver and other editors

    How to declare a div in @page @top-left

    How can I add padding to an element on my page?

    How to modify css class of container for specific element ID

    How to export only the used css from a site?

    How to make a drop-right menu?

    How can I delay the speed of hover purely via CSS3 for a div?

    Displaying the first in simple Show / Hide content menu with active a

    How to make my delete buttons responsive and stay absolute on my thumbnails

    Wordpress - Harvard Gazette - How did they do X? [closed]

    How to apply css rules to html element using ExtJS?

    How to reflow DIV boxes in CSS to stick to bottom right?

    How can I write a complex fraction using HTML/CSS/jQuery?

    How to toggle css visibility with Javascript

    How can I remove a text appearing in quotes after tag using CSS? [duplicate]

    how to remove all spaces from a file

    How to change header font and nav link color when slideshow image changes

    How to add left margin and wrap long lines in code tag

    CSS: how to make margin: 0px auto work

    Google font shows boxes in Internet Explorer 8 - IE 8

    How to force an update of a css selector inside context?

    How to add non-literal into a variable like jQuery?

    How to make this breed of resizable vertical divider for two divs?

    using the unorthodox `head {display: block}` to show text to user?