How to customize displayed styles

Customize the style for our City & postal codes search Javascript Localities Widget
  1. Prediction display
  2. Main widget CSS classes
  3. Default Localities Widget styles

Prediction display

When using the Localities JavaScript Widget, the default behavior is to display in the description field the following: name, admin_1, admin_0. Only postcodes have a specific description composed of name, postal_town, admin_0.

You can change the predictions display by setting a customDescription with the parameter you wish to see returned in the list, in the order of your choosing. Here is the list of all parameters that can be used.

For example if you want to display only the name and the country of each result in the list, set the customDescription key like the following: customDescription: ['name', 'admin_0']

Main widget CSS classes

Use these classes to customize our widget and harmonize it with your UI

Widget classes

Keyboard-selected result line wil receive an additional localities-item-selected class

Default Localities Widget styles

Below are listed the widget main default styles. Override them to customize your widget display.

.localities-container {
  color: #FFF;
  box-shadow: 0 4px 5px rgba(0,0,0,0.1)
}
.localities-item {
  color: #7B7B7B;
}
.localities-item-query {
  color: #7B7B7B;
}
.localities-icon {
  background-color: #b2b2b2;
}
.localities-matched {
  color: #000;
}
.localities-input {
  color: #000;
  border-radius: 0;
}
/* result line when selected or hovered */
.localities-item-selected,
.localities-item:hover {
  background-color: #edf4f9;
}
/* result icon when selected or hovered */
.localities-item-selected .localities-icon,
.localities-item:hover .localities-icon {
  background-color: #03A9F4;
}
Was this article helpful?
Have more questions? Submit a request