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 -->
  <input
    type="text"
    class="idpc-input"
    placeholder="Search your postcode"
    aria-label="Search a postcode to retrieve your address"
    autocomplete="none"
  />
  <!-- Button triggering Postcode Lookup -->
  <button type="button" class="idpc-button">Find my Address</button>
  <!-- Container to render `select` dropdown -->
  <div
    class="idpc-select-container"
    aria-live="polite"
    style="display: none"
  ></div>
  <!-- Any messages displayed here-->
  <p class="idpc-error" role="alert" style="display: none"></p>
</div>

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

Demo​

Loading...

Customise CSS Classes​

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