Skip to the content

Auto-Complete Styling

Take control of the display of the PredictiveAddress control.


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

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.

Read More »

The number of returned mail reduced by 28% as a result of the integrated reference to the goneaway file

Business Strategy Manager, Brookson Ltd

Start a Free 30 Day Trial Today

Start a free trial today