Skip to content
This repository has been archived by the owner on Mar 17, 2022. It is now read-only.

Styling Guide

Jump to bottom
Muhammad Martinez edited this page Jul 15, 2021 · 1 revision

When address verification is enabled, Lob will inject an HTML element into the target form in order to communicate form-level error messages. Similarly, when address autocompletion is enabled, Lob will inject an HTML element to contain suggested addresses.

In general, it's easy to customize colors and backgrounds for these elements using in-line color declarations. If, however, you require more advanced customization, you must include a custom CSS stylesheet. These options are described in the following two sections.

In-line Configuration

In-line configuration uses attribute values to configure element colors. Hex, RGB and named color formats are supported.

<!DOCTYPE html>
<html>
<body>
  <form action="/api/v1/add-address">
    <div>
      <label for="address1">Address 1</label>
      <input id="address1">
    </div>
    <div>
      <label for="address2">Address 2</label>
      <input id="address2">
    </div>
    <div>
      <label for="city">City</label>
      <input id="city">
    </div>
    <div>
      <label for="state">State</label>
      <input id="state">
    </div>
    <div>
      <label for="zip">Zip</label>
      <input id="zip">
    </div>
    <input type="submit" value="Submit">
  </form>
  <script src="https://cdn.lob.com/lob-address-elements/2.0.0/lob-address-elements.min.js"
    data-lob-key="live_pub_xxx" 
    data-lob-verify-value="strict"
    data-lob-suggestion-color="#666666"
    data-lob-suggestion-bgcolor="#fefefe" 
    data-lob-suggestion-bordercolor="#a8a8a8"
    data-lob-suggestion-activecolor="red" 
    data-lob-suggestion-activebgcolor="#eeeeee"
    data-lob-err-bgcolor="#006eff"
    data-lob-err-color="#ffffff"></script>
</body>
</html>
Attribute Name Attribute Value(s) Description
data-lob-suggestion-color <color/hex/rgb> The text color for an item in the suggestion list.
data-lob-suggestion-bgcolor <color/hex/rgb> The background color for an item in the suggestion list.
data-lob-suggestion-bordercolor <color/hex/rgb> The border color for the suggestion list.
data-lob-suggestion-activecolor <color/hex/rgb> The text color for an item in the suggestion list when actively hovered over or when traversed via the keyboard.
data-lob-suggestion-activebgcolor <color/hex/rgb> The background color for an item in the suggestion list when actively hovered over or when traversed via the keyboard.
data-lob-err-color <color/hex/rgb> The text color to use when rendering a form-level error message when the form fails verification.
data-lob-err-bgcolor <color/hex/rgb> The background color to use when rendering a form-level error message when the form fails verification

Stylesheet Declarations

Although more complex, a custom stylesheet gives full control over element styles. All necessary CSS classes have been provided in the example below. Override each class as necessary for full customization.

When authoring a custom stylesheet, Lob's default stylesheet should be suppressed using the data-lob-suggestion-stylesheet attribute (also shown in the example below).

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      box-sizing: border-box;
      font-family: sans-serif;
      color:#333333;
    }

    input {
      display: block;
      font-size: 1.05rem;
      width: 100%;
      padding: 10px;
      border-radius: .25rem;
      border: solid 1px #8c8c8c;
      margin: 0;
    }

    label {
      display: block;
      font-size: 1.1rem;
      margin: 20px 0 5px 0;
    }

    input[type='submit'] {
      background-color: #0594d8;
      color: #ffffff;
      border-color: #ffffff;
      font-size: 1.1rem;
      margin-top: 10px;
      width: 100px;
    }

    .lob-verify-message {
      padding:12px;
      font-size:1.2em;
      background-color:lightyellow;
      border-radius: .25rem;
      margin-bottom:20px;
    }

    .algolia-autocomplete {
      width: 100%; /* unnecessary for inline-block inputs */
    }

    .algolia-autocomplete .aa-dropdown-menu {
      width: 100%;
      border: 1px solid #a8a8a8;
      border-top: 0;
      background-color: #fefefe;
      overflow: hidden;
      border-radius: 0 0 .25rem .25rem;
      margin-top:-5px;
    }

    .algolia-autocomplete .aa-suggestion {
      cursor: pointer;
      padding: 12px;
      color: #666666;
    }

    .algolia-autocomplete .aa-suggestion:hover,
    .algolia-autocomplete .aa-suggestion:active,
    .algolia-autocomplete .aa-suggestion.aa-cursor {
      color: #0594d8;
      background-color: #eeeeee;
    }

    .algolia-autocomplete .aa-suggestion div {
      white-space: nowrap !important;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .algolia-autocomplete .aa-suggestion span {
      font-size: .8em;
    }
  </style>
</head>
<body>
  <form action="/api/v1/add-address">
    <div>
      <label for="address1">Address 1</label>
      <input id="address1">
    </div>
    <div>
      <label for="address2">Address 2</label>
      <input id="address2">
    </div>
    <div>
      <label for="city">City</label>
      <input id="city">
    </div>
    <div>
      <label for="state">State</label>
      <input id="state">
    </div>
    <div>
      <label for="zip">Zip</label>
      <input id="zip">
    </div>
    <input type="submit" value="Submit">
  </form>
  <script src="https://cdn.lob.com/lob-address-elements/2.0.0/lob-address-elements.min.js"
    data-lob-key="live_pub_xxx"
    data-lob-suggestion-stylesheet="false"
    data-lob-verify-value="strict"></script>
</body>
</html>
Attribute Name Attribute Value(s) Description
data-lob-suggestion-stylesheet false Use this flag to stop the Address Elements library from loading its default stylesheet.
Clone this wiki locally