Change Search widget placeholder text color

720
4
Jump to solution
12-12-2019 12:23 PM
AndrewL
Occasional Contributor II

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.

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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

  .esri-input.esri-search__input::placeholder{
        color:magenta;
   }

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

View solution in original post

4 Replies
RickeyFight
MVP Regular Contributor

Andrew Louchios‌  Can you provide a link to the map? 
If not look a the developer tools to adjust the css to the desired color.

0 Kudos
AndrewL
Occasional Contributor II

Our website is closed but I have a fiddle: VectorTileLayer - 4.13\n \n\n \n\n \n Researching\n\n\n \n \n \n \n \n \n", js: "\n\n requi… 

I was able to change the input font color but not the placeholder font color using devtools.

0 Kudos
KellyHutchins
Esri Frequent Contributor

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

  .esri-input.esri-search__input::placeholder{
        color:magenta;
   }

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

RickeyFight
MVP Regular Contributor

Kelly Hutchins‌ Thanks! I was wondering why I could not find it. Did not think about placeholder. 

0 Kudos