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

Design help General
1

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)

2

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>
3 Likes
3

Thanks very much, Carlos! I appreciate the help.

4

Here’s a native solution

5

Hey, I thought I would also drop this here for anyone as I was struggling for a while to figure this out.

If you want to change the placeholder text of an input field there is a native way inside Webflow.
as seen here in the style selector panel

image

However, if you need to change the input text as in the text that the user inputs into the search box you would have to use custom JS.

Here is my setup for a simple email form with two inputs:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let input1 = document.getElementById('email-input');
        let input2 = document.getElementById('name-input');

        // Add an event listener for the input event on input1
        input1.addEventListener('input', function() {
            // Change the color of the user-inputted text for input1
            input1.style.color = '#51504c'; // Change this to the desired text color
        });

        // Add an event listener for the input event on input2
        input2.addEventListener('input', function() {
            // Change the color of the user-inputted text for input2
            input2.style.color = '#51504c'; // Change this to the desired text color
        });
    });
  </script>

You have to select the ID given to the input field and change the colour of the text by injecting CSS.

I hope this helps someone!