Auto-Complete Styling

Take control of the display of the PredictiveAddress control.

More Control

Need more control over the styling of the auto-complete UI?

Use the showResults callback method to provide a complete bespoke user interface instead of using the built-in one provided with our library.

CSS Classes

Customise the CSS classes used by PredictiveAddress to start controlling how it looks

The PredictiveAddress control uses a number of CSS classes to control how it is displayed. Default settings for these are included in the standard PredictiveAddress stylesheet, but you can customise them in your own stylesheets as well to ensure PredictiveAddress blends with the rest of your website style.

CSS Class	Description
`predictiveAddressTextBox`	Applied to the `<input>` element that PredictiveAddress is added to
`predictiveAddressCountryListContainer`	Applied to a `<div>` element positioned beneath the `<input>` element to hold the country selector
`predictiveAddressCountryList`	Applied to a `<div>` element within the country list container. Contains a `<ul>` element for the country list. Each `<li>` element within the list contains an `<img>` element for the country flag and a `<span>` element for the country name
`predictiveAddressCountrySelector`	Applied to a `<div>` element within the country list container, displaying the currently selected country