Skip to content
Search Articles/

less than a minute read • Updated 2 hours ago

Style the address autocomplete widget

How to customize the styling and dimensions of the checkout's address autocomplete widget.

The address autocomplete widget ships with default styles so it displays cleanly out of the box. To customize it further, overwrite its styles the same way you would style any other part of the checkout.

Steps

  1. 1

    Overwrite the widget’s CSS in your checkout template, as you would for any other checkout element.

  2. 2

    If you need to resize the dropdown selector, set its width and height with !important — for example, width: 30px !important;. These styles need to override the widget’s own positioning logic, which won’t apply otherwise.

Notes

  • The dropdown selector and flag icon are positioned absolutely, based on the size and position of the location text input. The dropdown’s width and height match the text input’s height, including padding, and it sits on the right side of the field.

  • When the dropdown is present, the text input’s typeable width is reduced by the dropdown’s width, so the input’s overall size doesn’t change but text can’t be entered underneath the dropdown button.

  • The flag icon sits to the right of the text input, and to the left of the dropdown selector if one is present.

  • For most custom templates, the default positioning works without adjustment — this is only needed if your design requires a different dropdown size.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.