Jump to content

How to change the word "Search" in my searchbar?

Recommended Posts

Site URL: https://charlesnankivel.com/proprental

Hello!

I have a question about changing the color of my search bar. I have found all sorts of answers regarding code for changing the color of the frame, drop down boxes, and the text as you're typing, but I haven't been able to find anything about changing the color of the word "Search" that is in the search bar. As you can see, it is a very washed out grey that is hard to read especially on mobile devices. Once you start typing, however, the text is white. How do I change the color of the word "search" to white so that it is more easily visible on my site?

And while we are on the subject of the search bar, is there a way to limit the results of my search bar? I currently only see options to "Search one page" and "Search every page." I would love to find a way to limit my search results to a few pages within my prop rental category, but exclude all the other pages in my portfolio. Is there a custom code for that?

Additionally, I am using the Avenue template if that is relevant at all.

Thanks!

Website Search bar.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Re: your main question of how to change the color of the placeholder "Search" text, try this in your custom CSS (it requires multiple settings for different browsers):

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ffffff;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ffffff;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #ffffff;
}

Source: https://www.w3schools.com/howto/howto_css_placeholder.asp

Link to comment
3 hours ago, dvgdvgdvg said:

Re: your main question of how to change the color of the placeholder "Search" text, try this in your custom CSS (it requires multiple settings for different browsers):


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ffffff;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ffffff;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #ffffff;
}

Source: https://www.w3schools.com/howto/howto_css_placeholder.asp

This is perfect! I didn't realize it would differ between web browsers. Thank you so much!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.