Styling
Controlling the Design
The Autoaddress jQuery plugin comes with a stylesheet provided (See Getting Started on how to include), so all the css styling has been provided for you out of the box.
Below we will detail all the CSS classes used by the plugin and what their purpose is. You can easily customize the styling of the plugin to your needs by overriding our styles, or by replacing our classes completely during plugin initialization.
HINT: If you add extra CSS rules to override styles for the plugin remember to load after them after the Autoaddress stylesheet.
Basic Markup Structure
Below you can see the basic out of the box HTML structure of the AutoAddress jQuery Plugin when initialised on your webpage.
In this example, the plugin was initialized on <div id="demo">
<div id="demo">
<div class="autoaddress-control">
<input class="autoaddress-text-box" type="text"></input>
<button class="autoaddress-button">Search</button>
<div class="autoaddress-autocomplete">
<div class="autoaddress-suggestion"></div>
</div>
</div>
</div>
CSS Classes
| Class Name | Description | HTML |
|---|---|---|
| .autoaddress-control | Parent class for the Autoaddress plugin, all other Autoaddress CSS classes are nested underneath this class. | <div> |
| .autoaddress-text-box | Class for the Search Input Text Field. | <input> |
| .autoaddress-button | Class for the Search Button. | <button> |
| .autoaddress-autocomplete | Container class for the autocomplete suggestions. | <div> |
| .autoaddress-suggestion | Class for autocomplete individual item. | <div> |
| .autoaddress-options-container | Container class for options div which insists of the options info message and options list. | <div> |
| .autoaddress-options-list | Container class for the list of options. | <div> |
| .autoaddress-options-item | Class for displaying an option in the options list. | <li> |
| .autoaddress-options-msg .error | Class for the error message information panel. | <div> |
| .autoaddress-options-msg .info | Class for the information message information panel. | <div> |
| .autoaddress-options-msg .success | Class for the success message information panel. | <div> |
| .autoaddress-options-tabs | Class for clickable tabs on a result containing options for addresses / businesses. | <ul> |
| .autoaddress-back-link | Class for the Back Link | <a> |
| .autoaddress-close-msg | Class for the Close Icon on the notification panels. | <a> |
HINT: If you wish to add override our existing styles, you can do so by adding your own CSS rules based on the above classes. But note that our css classes are nested with.autoaddress-controlto ensure our CSS does not interfere with your existing CSS, so for example if you wish to add a change to.autoaddress-buttonyou would add a CSS rule as follows.autoaddress-control > .autoaddress-button.
To make sure you are overriding the correct CSS classes we highly recommend using your favourite web inspector tool, select the element you want to change and view the CSS rules currently applied to that element.