Streaming live at 10am (PST)

How to change the font color of the Search input field?

Hello everyone,

Can someone please help me with how to change the font color of the Search element’s text input field? By default, it appears to be dark gray, which is very difficult to read against my website’s black background.

Thanks very much!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Howdy,

Using custom CSS this is possible.

Here’s a quick example I did on a test project.

Put this either on the page’s header/footer or in the project settings custom code and simply change the color.

 <style>
input[type="search"]::placeholder {
  color: orange;
}
</style>

By specifying type="search" it wont mess with any placeholder text you may have in other non-search input elements.

If you decide you want another search element that doesn’t share the same color placeholder text you can add the class name to CSS to specify the specific element.

 <style>
input[type="search"].className::placeholder {
  color: orange;
}
</style>
2 Likes

Thanks very much, Carlos! I appreciate the help.

Here’s a native solution