Change Search widget placeholder text color

AndrewL

CSS:

#searchWidget {
width: 473px;
border-style: solid;
border-width: 1px;
}

JS:

var searchWidget = new Search({
view: view,
container: "searchWidget",
});

HTML: 

<div id="searchWidget"></div><br>

The placeholder text is too light in my opinion and I would like to change it to black or a darker gray. I am using version 4.13 of ArcGIS API for JS. Thank you.

address text color.jpg

khutchins

You can modify the placeholder color using the CSS pseudo element. Note that it looks like you'll need to add a vendor prefix for it to work in IE

  <SPAN class="selector token">.esri-input.esri-search__input::placeholder</SPAN><SPAN class="punctuation token">{</SPAN>
        <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN>magenta<SPAN class="punctuation token">;</SPAN>
   <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Details on the pseudo element can be found here: ::placeholder - CSS: Cascading Style Sheets | MDN