[Resolved] Adding words to Search Box

[Jim]

For the search box in my main menu, I’d love to add the words “Search Here” that then disappear when someone clicks on the box. I’ve had a few people tell me that they were confused what happened when they click the search icon and a bar appeared. Is there any way to add disappearing text into the box? Thanks.

[Leo]

Hi there,

The second example should be what you are looking for:
https://docs.generatepress.com/article/generate_navigation_search_output/

[Jim]

That’s great. Figured you all had answered that before, but I couldn’t find it.

One question though. Is there any way to change the text color (preferably to white)? It blends in a bit more than I’d like with the default.

[Leo]

Looks like you’ve figured out?

I’m seeing white text: https://www.screencast.com/t/y3TNiAPO

[Jim]

I’m talking about the part that says “Enter your search” I’d like to change the color of that so it’s a bit more obvious. Not the color of the text once you start typing a search.

[Leo]

I don’t see the word “enter your search”.

Did you remove it? Or you might need to clear your caching plugin.

[Jim]

I just checked on an on logged in browser and its there. https://snag.gy/LuJPUV.jpg

The text is really light, and I’d like to make it brighter so it’s easier to see

[Leo]

Try this:

.navigation-search input[type="search"]::placeholder {
    color: #ffffff;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Jim]

Works perfectly. One more question though. Is there any way to make the text disappear when someone clicks the box? I have a somewhat older readership (which is why I wanted the text in the first place), so I don’t want them to get confused trying to erase the text before typing their search.

[Leo]

I don’t think that’s possible as the input field is already activated when the search icon is clicked.

So there is no need to click the box again before typing in the search field.

[Jim]

Ok. I know you don’t have to delete the text. I just thought it would be nice to have it disappear on click just so no one is confused.

[Leo]

What I was trying to explain is that we don’t actually know when the user clicks on the search box again as it’s already activated when the search icon is clicked.

Shouldn’t be too hard for users to figure out I hope 🙂

[Jim]

Gotcha. Thanks for the help. Would be nice to have the option on click, but it’s better with the text there regardless.

[Leo]

We will keep that in mind for sure 🙂

[Author]

Posts