How to Style the Search Placeholder Text (Storefront Theme)

My understanding is you need different pseudo selectors for different browsers, so:

/* Chrome/Opera/Safari */
.widget_product_search input::-webkit-input-placeholder {
  color:#000;
}
/* Firefox 19+ */
.widget_product_search input::-moz-placeholder {
  color:#000;
}
/* IE 10+ */
.widget_product_search input:-ms-input-placeholder {
  color:#000;
}

Tested on Chrome only.

Hi, thanks for the reply, I have tried this already but it did not work (using !important also). A mod from the storefront theme is currently looking at it, I hope we can get this figured out. The styling may be in the javascript, which is why it doesn’t work, I don’t know..

I can’t find the styles in the page, perhaps you took it out. If you would like to put it back I can try to debug it.

I have added these lines back to the stylesheet

/* Chrome/Opera/Safari */
.site .widget_product_search input::-webkit-input-placeholder {
  color:#F00!important;
}
/* Firefox 19+ */
.site .widget_product_search input::-moz-placeholder {
  color:#F00!important;
}
/* IE 10+ */
.site .widget_product_search input:-ms-input-placeholder {
  color:#F00!important;
}

I can’t see a class “site” in the shop page. Try it without.

I assume you’ve found the link to my website on the storefront support thread

Yes.

The very first div on every wordpress page has id “page” and class “site”.
Also all my styles that are not page-specific begin with .site, I keep a better overview that way, that is certainly not the problem.

Its working on firefox and edge, but not on chrome.
Any ideas?

Sorry, found the site class.

Got it to work in Chrome with “Empty cache and hard reload” – Chrome Mac. Presumably Chrome Windows has something similar.

I found a way to get it to work in chrome on windows by adding this class

/* Chrome/Opera/Safari */
.site .widget_product_search input::placeholder {
  color:#F00!important;
}

Thanks for the help! ??

(I always use a plugin called Clear Cache to reload my pages, it deletes all the browing data I specify)

• This reply was modified 7 years, 8 months ago by d7ac.