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 looksThe 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 |