# Styling With javascript

## mainStyle[​](#mainstyle "Direct link to mainStyle")

Sets the overall layout and spacing for the components involved.

```
mainStyle: {

  backgroundColor: "#2196F3"

}
```

***

## containerStyle[​](#containerstyle "Direct link to containerStyle")

**Target HTML Element:** The container element, encompassing the autocomplete functionality including the input and suggestion list.

```
containerStyle: {

  maxWidth: "500px"

}
```

***

## inputStyle[​](#inputstyle "Direct link to inputStyle")

**Target HTML Element:** `<input>` field.

```
inputStyle: {

  backgroundColor: "#FFC107",

  borderColor: "#FF9800",

  borderWidth: "1px",

  borderStyle: "solid",

  borderRadius: "4px",

  padding: "8px",

  fontSize: "16px",

  width: "80%"

}
```

***

## liStyle[​](#listyle "Direct link to liStyle")

**Target HTML Element:** Each `<li>` element within the suggestion list, including address suggestions and messages.

```
listStyle: {

  borderColor: "#AD1457",

  borderWidth: "1px",

  borderStyle: "solid",

  borderRadius: "4px",

  boxShadow: "0 2px 4px rgba(0,0,0,0.2)",

  marginTop: "2px"

}
```

***

## listStyle[​](#liststyle "Direct link to listStyle")

**Target HTML Element:** The `<ul>` element that contains the list of suggestions.

```
liStyle: {

  backgroundColor: "#4CAF50",

  padding: "8px",

  margin: "2px 0",

  cursor: "pointer"

}
```

***

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

You can use the Sandbox below to try it out:

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",
  mainStyle: {
    backgroundColor: "#2196F3",
  },
  containerStyle: {
    maxWidth: "500px",
  },
  inputStyle: {
    backgroundColor: "#FFC107",
    borderColor: "#FF9800",
    borderWidth: "1px",
    borderStyle: "solid",
    borderRadius: "4px",
    padding: "8px",
    fontSize: "16px",
    width: "80%",
  },
  listStyle: {
    borderColor: "#AD1457",
    borderWidth: "1px",
    borderStyle: "solid",
    borderRadius: "4px",
    boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
    marginTop: "2px",
  },
  liStyle: {
    backgroundColor: "#4CAF50",
    padding: "8px",
    margin: "2px 0",
    cursor: "pointer",
  },
  outputFields: {
    line_1: "#line_1",
    line_2: "#line_2",
    city: "#city",
    state: "#state",
    zip_plus_4_code: "#zipcode",
  },
});
```