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

[HenriettaK]

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!

[KellyHutchins · Accepted solution]

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;
}

[Russell_Provost]

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

[KellyHutchins]

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;
}
}