# Style Adjustments

It's possible that the default styling may require a small tweak to allow it to better match your design and site aesthetic. Rather than adding CSS assets, consider applying a style attribute as a setup configuration option. The configurations below apply a style attribute directly to a specific element of the address finder.

## Input[​](#input "Direct link to Input")

[`inputStyle`](https://postcode-lookup.ideal-postcodes.co.uk/interfaces/Controller.ControllerConfig.html#inputStyle)

Applies additional styling to the postcode lookup field.

## Container Element[​](#container-element "Direct link to Container Element")

[`contextStyle`](https://postcode-lookup.ideal-postcodes.co.uk/interfaces/Controller.ControllerConfig.html#contextStyle)

Applies styling to the Postcode Lookup UI container element.

## Button Style[​](#button-style "Direct link to Button Style")

[`buttonStyle`](https://postcode-lookup.ideal-postcodes.co.uk/interfaces/Controller.ControllerConfig.html#buttonStyle)

Applies additional styling to the search button.

## Message Style[​](#message-style "Direct link to Message Style")

[`messageStyle`](https://postcode-lookup.ideal-postcodes.co.uk/interfaces/Controller.ControllerConfig.html#messageStyle)

Applies styling to the message container.

## Address Dropdown Style[​](#address-dropdown-style "Direct link to Address Dropdown Style")

[`selectStyle`](https://postcode-lookup.ideal-postcodes.co.uk/interfaces/Controller.ControllerConfig.html#selectStyle)

Applies styling to the `<select>` element displaying address selections.

## 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",
  inputStyle: {
    borderColor: "#16a34a",
  },
  buttonStyle: {
    fontSize: "1rem",
    fontWeight: "600",
    backgroundColor: "#16a34a",
    borderColor: "#16a34a",
  },
  selectStyle: {
    borderColor: "#16a34a",
  },
  outputFields: {
    line_1: "#line_1",
    line_2: "#line_2",
    line_3: "#line_3",
    post_town: "#post_town",
    postcode: "#postcode",
  },
});
```