Jump to content

Search bar customizing input field text

Recommended Posts

I have been asked a week ago to see if the input text within the search bar could be customised. After too many hours looking, trying different css, js, and the inspector with .sqs.....(fill in blank here) I am resorting to asking for help as I am at a loss.

Is this even possible possible what I am trying?

I have been asked to change the custom search text from "Type to Search"to something totally different.

Thanks

Link to comment

Hey, the selector might be different from the video, but have you tried this?

https://www.youtube.com/watch?v=22l29BbD5cs

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

If you share a link to your website, can check

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
9 hours ago, ShortAngryViking said:

I tested for this website. Try putting the below code in your Code Injection, Footer. 

I used the code from the video, just changed the selector to the specific ID, because that search bar html is structured differently.

Let me know how it goes, or if you need help with the other website.

<!-- =====
Adjust Search Block Placeholder Text
From Will-Myers.com
========== -->
<script>
  window.addEventListener('DOMContentLoaded', changeSearchPlaceholder);

  function changeSearchPlaceholder() {
    let newText = "Search Me";
    let searchBars = document.querySelector('#yui_3_17_2_1_1699789732927_371');

    searchBars.forEach(el => el.placeholder = newText)
  }
</script>

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.