# 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[​](#css-class-hierarchy "Direct link to CSS Class Hierarchy")

Postcode Lookup renders the UI inside of your named [`context`](https://postcode-lookup.ideal-postcodes.co.uk/classes/Controller.Controller-1.html#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[​](#demo "Direct link to Demo")

Loading...

```
<form>
  <label>Search your Address</label>
  <div id="context"></div>
  <label for="line_1">Address Line One</label>
  <input type="text" id="line_1" />
  <label for="line_2">Address Line Two</label>
  <input type="text" id="line_2" />
  <label for="line_3">Address Line Three</label>
  <input type="text" id="line_3" />
  <label for="post_town">Post Town</label>
  <input type="text" id="post_town" />
  <label for="postcode">Postcode</label>
  <input type="text" id="postcode" />
</form>
```

```

import { PostcodeLookup } from "@ideal-postcodes/postcode-lookup";

PostcodeLookup.setup({
  apiKey: "ak_test",
  context: "#context",
  outputFields: {
    line_1: "#line_1",
    line_2: "#line_2",
    line_3: "#line_3",
    post_town: "#post_town",
    postcode: "#postcode",
  },
});
```

```
  .idpc-button {
  background-color: #4a90d9;
  color: white;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
}
.idpc-input {
  border: 2px solid #4a90d9;
}
```

## Customise CSS Classes[​](#customise-css-classes "Direct link to Customise CSS Classes")

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

* Search Button [`buttonClass`](https://postcode-lookup.ideal-postcodes.co.uk/interfaces/Controller.ControllerConfig.html#buttonClass)
* Search Input [`inputClass`](https://postcode-lookup.ideal-postcodes.co.uk/interfaces/Controller.ControllerConfig.html#inputClass)
* Select Container Class [`selectContainerClass`](https://postcode-lookup.ideal-postcodes.co.uk/interfaces/Controller.ControllerConfig.html#selectContainerClass)
* Select Input [`selectClass`](https://postcode-lookup.ideal-postcodes.co.uk/interfaces/Controller.ControllerConfig.html#selectClass)
* Message Container [`messageClass`](https://postcode-lookup.ideal-postcodes.co.uk/interfaces/Controller.ControllerConfig.html#messageClass)
* Unhide Container Class [`unhideClass`](https://postcode-lookup.ideal-postcodes.co.uk/interfaces/Controller.ControllerConfig.html#unhideClass)