topic Customizing font size and boldness for locator placeholder text in Zone Lookup App in ArcGIS Instant Apps Questions

Customizing font size and boldness for locator placeholder text in Zone Lookup App

HenriettaK — Mon, 13 May 2024 18:57:59 GMT

Hello Instant Apps Community!

I have built an instant app using the Zone Lookup template and have rolled it out for testing to the organization. A lot of the feedback has been about bolding the placeholder text in the address search bar or somehow making the search bar larger. The app currently looks like this:

Is there a way to bold or increase the font size of the geolocator placeholder text that reads "Find address or place"?

Also, is there a way to increase the size of the address search bar?

Thank you so much and I appreciate any help!

Re: Customizing font size and boldness for locator placeholder text in Zone Lookup App

KellyHutchins — Mon, 13 May 2024 19:07:24 GMT

You can increase the font size and bold the text by adding the following to the custom CSS config option:

.esri-search__form .esri-input[type=text] { font-size: 22px; font-weight: bold; }

Re: Customizing font size and boldness for locator placeholder text in Zone Lookup App

Russell_Provost — Tue, 31 Mar 2026 22:48:48 GMT

Is this CSS config option no longer available in the latest update? My app doesn't seem to be responding to this override.

Re: Customizing font size and boldness for locator placeholder text in Zone Lookup App

KellyHutchins — Thu, 02 Apr 2026 21:10:22 GMT

You can definitely still make css changes but its a bit trickier now because the apps use components encapsulate some of the styling and that can make it harder to make updates. But you can modify the placeholder color and update the font size and weight. Here's an example that should work for Zone Lookup

.search-panel{ calcite-autocomplete{ --calcite-autocomplete-input-placeholder-text-color:#ff00ff; --calcite-font-weight-normal:900; --calcite-font-size-relative-base:1.2em; } }