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...