topic Re: Change Search widget placeholder text color in ArcGIS JavaScript Maps SDK Questions

Change Search widget placeholder text color

AndrewL — Thu, 12 Dec 2019 20:23:09 GMT

CSS:

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

JS:

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

HTML:

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.

Re: Change Search widget placeholder text color

RickeyFight — Thu, 12 Dec 2019 20:28:50 GMT

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.

Re: Change Search widget placeholder text color

AndrewL — Thu, 12 Dec 2019 20:40:27 GMT

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.

Re: Change Search widget placeholder text color

KellyHutchins — Fri, 10 Dec 2021 21:49:31 GMT

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

Re: Change Search widget placeholder text color

RickeyFight — Fri, 13 Dec 2019 18:48:12 GMT

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