# 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, we recommend applying a style attribute as a setup configuration option. The configurations below apply a style attribute directly to a specific element of the Address Lookup.

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

[`inputStyle`](https://address-finder.ideal-postcodes.co.uk/interfaces/controller.controlleroptions.html#inputstyle)

Applies additional styling to the input field.

## Suggestion Element[​](#suggestion-element "Direct link to Suggestion Element")

[`liStyle`](https://address-finder.ideal-postcodes.co.uk/interfaces/controller.controlleroptions.html#listyle)

Applies custom styling to every list element `<li>` including address suggestions and messages.

## Suggestion List[​](#suggestion-list "Direct link to Suggestion List")

[`listStyle`](https://address-finder.ideal-postcodes.co.uk/interfaces/controller.controlleroptions.html#liststyle)

Applies additional styling to the suggestion list.

## Address Lookup Container[​](#address-lookup-container "Direct link to Address Lookup Container")

[`containerStyle`](https://address-finder.ideal-postcodes.co.uk/interfaces/controller.controlleroptions.html#containerstyle)

Applies additional styling to the container element.

## Main Style[​](#main-style "Direct link to Main Style")

[`mainStyle`](https://address-finder.ideal-postcodes.co.uk/interfaces/controller.controlleroptions.html#mainstyle)

## Demo[​](#demo "Direct link to Demo")

Loading...

```
<form>
<label for="line_1">Address First Line</label>
<input type="text" id="line_1" />
<label for="line_2">Address Second Line</label>
<input type="text" id="line_2" />
<label for="city">City</label>
<input type="text" id="city" />
<label for="state">State</label>
<input type="text" id="state" />
<label for="zipcode">Zip Code</label>
<input type="text" id="zipcode" />
</form>
```

```

import { AddressLookup } from "@addresszen/address-lookup";

AddressLookup.setup({
  apiKey: "ak_test",
  inputStyle: {
    border: "4px solid #e11d48",
    backgroundColor: "#fff1f2",
    color: "#881337",
    fontWeight: "600",
    fontSize: "1.05rem",
  },
  listStyle: {
    borderRadius: "16px",
    border: "4px solid #e11d48",
    backgroundColor: "#fff1f2",
    boxShadow: "0 8px 24px rgba(225, 29, 72, 0.35)",
  },
  liStyle: {
    padding: "20px 24px",
    fontSize: "1.05rem",
    fontWeight: "600",
    color: "#881337",
    borderBottom: "1px solid #fecdd3",
  },
  outputFields: {
    line_1: "#line_1",
    line_2: "#line_2",
    city: "#city",
    state: "#state",
    zip_plus_4_code: "#zipcode",
  },
});
```