Skip to main content

Styling With javascript

mainStyle​

Sets the overall layout and spacing for the components involved.

mainStyle: {
  backgroundColor: "#2196F3"
}

containerStyle​

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

containerStyle: {
  maxWidth: "500px"
}

inputStyle​

Target HTML Element: <input> field.

inputStyle: {
  backgroundColor: "#FFC107",
  borderColor: "#FF9800",
  borderWidth: "1px",
  borderStyle: "solid",
  borderRadius: "4px",
  padding: "8px",
  fontSize: "16px",
  width: "80%"
}

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​

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

liStyle: {
  backgroundColor: "#4CAF50",
  padding: "8px",
  margin: "2px 0",
  cursor: "pointer"
}

Demo​

You can use the Sandbox below to try it out:

Loading...