Skip to main content

CSS Classes

Postcode Lookup does not inject any styling into your page. Instead it relies on your pre-existing styles for your forms to render the Postcode Lookup UI.

CSS Class Hierarchy

Postcode Lookup renders the UI inside of your named context. The HTML and CSS classes are structured as shown below:

<!-- Parent Context Element -->
<div id="context">
<!-- Postcode Lookup Input -->
placeholder="Search your postcode"
aria-label="Search a postcode to retrieve your address"
<!-- Button triggering Postcode Lookup -->
<button type="button" class="idpc-button">Find my Address</button>
<!-- Container to render `select` dropdown -->
style="display: none"
<!-- Any messages displayed here-->
<p class="idpc-error" role="alert" style="display: none"></p>

Note that:

  • The container with class idpc-select-container will render the <select> element containing address suggestions for a postcode
  • The select container is initially hidden
  • The message container is initially hidden



Customise CSS Classes

Custom styling can be achieved by applying your own CSS classes to each HTML element created by Postcode Lookup: