Auto-Complete Styling
Control the display of the PredictiveAddress autocomplete control
CSS Classes
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 |
|---|---|
data8-predictiveaddress |
Applied to the <input> element that PredictiveAddress is added to |
data8-pa-countrylistcontainer |
Applied to a <div> element positioned beneath the <input> element to hold the country selector and address autocomplete list |
data8-pa-countryselector |
Applied to a <div> element within the country list container, displaying the currently selected country. Clicking on this element shows the country dropdown |
data8-pa-countrydropdowncontainer |
Applied to a <div> element within the country list container. Contains an <input> element to search for a country, and a <div> with the .data8-pa-countrylist class to show the available countries |
data8-pa-countrylist |
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 |
data8-pa-autocomplete |
Applied to a <div> element within the country list container to show the list of matching addresses when the user has started typing in the main text box. Contains a <div> element with the .data8-pa-autocompletetitle class to show the total number of results, and a <div> element with the .data8-pa-autocompleteitem class for each address |
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.