How to edit / customise search box placeholder text

Site URL: https://miguelmateas.com/daily-picks

Good morning! 

Does anyone know how to edit the placeholder text in the search box from "Search" to something else? 

Thank you in advance of your help!

Miguel

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
		$(".sqs-search-ui-text-input .search-input::placeholder").html(function() { 
          return $(this).html().replace("Search", "new text");  
    });
	});
</script>

1 hour ago, tuanphan said:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> window.Squarespace.onInitialize(Y, function(){ $(".sqs-search-ui-text-input .search-input::placeholder").html(function() { return $(this).html().replace("Search", "new text"); }); }); </script>

Thank you so much @tuanphan. I'm afraid that didn't actually work 😞

I'm also looking for a solution. The code above doesn't work for me either. I'm on Squarespace 7.0 / Brine.

On 6/10/2020 at 6:08 PM, therealmiguel said:

Thank you so much @tuanphan. I'm afraid that didn't actually work 😞

6 minutes ago, sandrakeus said:

I'm also looking for a solution. The code above doesn't work for me either. I'm on Squarespace 7.0 / Brine.

Try again with

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
	$(".sqs-search-ui-text-input .search-input").attr('placeholder','new text');
});
</script>

Fantastic! Thank you so much @tuanphan! That's worked wonderfully! 

@tuanphan Thank you so much again for your help with the search placeholder query above. 

Do you happen to know how to change the colour of the search box border on 7.1:  https://miguelmateas.com/daily-picks

Thanks again! 

Miguel

3 minutes ago, therealmiguel said:

@tuanphan Thank you so much again for your help with the search placeholder query above. 

 

Do you happen to know how to change the colour of the search box border on 7.1:  https://miguelmateas.com/daily-picks

Thanks again! 

Miguel

Add to Home > Design > Custom CSS

.sqs-search-ui-button-wrapper.color-dark .search-input {
    border-color: red;
}

You're a star, thank you! 🙂 🙏🏽

This did not work for me to replace search input placeholder text. Using 7.1. Is that the problem?

19 hours ago, theresa.southern said:

This did not work for me to replace search input placeholder text. Using 7.1. Is that the problem?

Can you share link to page where you use search input? I can check easier.

On 6/15/2020 at 11:36 AM, tuanphan said:

 

Try again with

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
	$(".sqs-search-ui-text-input .search-input").attr('placeholder','new text');
});
</script>

 

This code still doesn't work for me. But I found a solution that worked for me in mean time.

On 6/15/2020 at 5:36 AM, tuanphan said:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $(".sqs-search-ui-text-input .search-input").attr('placeholder','new text'); }); </script>

Hi @tuanphan

I also can't get this code to work for me - I'd like to just change the Search placeholder text in the top navigation of this website to "Search by Artist": www.williamchambersart.com - Any help would be appreciated!

Hi @Leda_Atomika

Thanks to @tuanphan


@sandrakeus @theresa.southern Please share your website address.
Use this code for your website.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
 $(document).ready(function() {
	$(".Header-search .Header-search-form-input").attr('placeholder','new text');
});
</script>

Please use the like button if it helps you!

Best,
Leopold

21 hours ago, IXStudio said:

Hi @Leda_Atomika

Thanks to @tuanphan


@sandrakeus @theresa.southern Please share your website address.
Use this code for your website.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
 $(document).ready(function() {
	$(".Header-search .Header-search-form-input").attr('placeholder','new text');
});
</script>

Please use the like button if it helps you!

Best,
Leopold

Hi Leopold - Thank you for your answer, however I get a syntax error on <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js">

Apologies if it's a simple fix, I am clueless on this... thank you!

The site is:  Version 7.0– Brine family (Jaunt template) 

Your welcome. @Leda_Atomika
Please check the line 40. I think the problem is there. But if can't fix it please let me know via Skype: LeopoldJobs

Please use the like button if it helps you!

Best,
Leopold

Hi - when I try this code (Tuan's), it makes all my buttons stop being the same width. I couldn't leave the code in my site so I can't show an example, but this is all the code I have in my site:

Any assistance would be helpful as re-naming the search text would clarify my UX quite a bit... 

Thank you!

/* Small Button Styling */
.sqs-block-button-element--small {
 width: 35% !important;
}

/* Medium Button Styling */
.sqs-block-button-element--medium {
 width: 55% !important;
}

/* Large Button Styling */
.sqs-block-button-element--large {
 width: 55% !important;
}

/* Newer posts */
nav.blog-list-pagination .prev-label {
    visibility: hidden;
}
nav.blog-list-pagination .prev-label:before {
    visibility: visible;
    content: "More Posts";
}
/* Older posts */
nav.blog-list-pagination .next-label {
    visibility: hidden;
}
nav.blog-list-pagination .next-label:after {
    visibility: visible;
    content: "More Posts";
  font-size: 26px !important;
  font-weight: 500;
}
/* Summary Block Styling */
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: Futura;
font-weight: 500;
font-size: 24px !important;
color: 042426;
 } }
/* Hide Shop Categories */
.products.collection-content-wrapper .nested-category-children {
  
  display: none;
  
  }

//--Slideshow: Reel Buttons
.gallery-reel-control-btn {color: #000000}
.gallery-reel-control-btn::before{background-color: #F7F6F3}

/* Mobile Menu Font */
.header-menu-nav-item a {
    font-size: 18px;
}

On 3/17/2021 at 5:49 AM, coriwhat said:

Hi - when I try this code (Tuan's), it makes all my buttons stop being the same width. I couldn't leave the code in my site so I can't show an example, but this is all the code I have in my site:

Any assistance would be helpful as re-naming the search text would clarify my UX quite a bit... 

Thank you!

/* Small Button Styling */
.sqs-block-button-element--small {
 width: 35% !important;
}

/* Medium Button Styling */
.sqs-block-button-element--medium {
 width: 55% !important;
}

/* Large Button Styling */
.sqs-block-button-element--large {
 width: 55% !important;
}

/* Newer posts */
nav.blog-list-pagination .prev-label {
    visibility: hidden;
}
nav.blog-list-pagination .prev-label:before {
    visibility: visible;
    content: "More Posts";
}
/* Older posts */
nav.blog-list-pagination .next-label {
    visibility: hidden;
}
nav.blog-list-pagination .next-label:after {
    visibility: visible;
    content: "More Posts";
  font-size: 26px !important;
  font-weight: 500;
}
/* Summary Block Styling */
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: Futura;
font-weight: 500;
font-size: 24px !important;
color: 042426;
 } }
/* Hide Shop Categories */
.products.collection-content-wrapper .nested-category-children {
  
  display: none;
  
  }

//--Slideshow: Reel Buttons
.gallery-reel-control-btn {color: #000000}
.gallery-reel-control-btn::before{background-color: #F7F6F3}

/* Mobile Menu Font */
.header-menu-nav-item a {
    font-size: 18px;
}

Hi. Do you still need help? Can you share link to page where you add search box?

Hi I'm on 7.1 and having the same problem.

https://ibb.co/VDPfcv3

Diversify.film

I want to change the placeholder text.

I used this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
 $(document).ready(function() {
	$(".Header-search .Header-search-form-input").attr('placeholder','new text');
});
</script>

Hi this link could be helpful to you : placeholder-color-css

On 3/25/2021 at 11:59 AM, monicam93 said:

Hi I'm on 7.1 and having the same problem.

https://ibb.co/VDPfcv3

Diversify.film

I want to change the placeholder text.

I used this:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
 $(document).ready(function() {
	$(".Header-search .Header-search-form-input").attr('placeholder','new text');
});
</script>

Hi,

Settings > Advanced > Code Injection

Not Custom CSS

Hi Guys

The above code works for me which is great and I have managed to change the text that appears in the searchbox but is it possible to make the text bold?

I have tried a few things but no luck

thanks
Jay

5 minutes ago, Dask said:

is it possible to make the text bold?

Please see How To Change Placeholder Color.

Let us know how it goes.

Hello,

Is there any chance to change the placeholder text in search textbox with CSS?
I am on personal 7.1, and would like to translate the placeholder text in search textbox and newsletter block textboxes.

Thank you.

3 hours ago, black_rooster said:

Is there any chance to change the placeholder text in search textbox with CSS?

No. CSS changes how the structure of things look. In the case of placeholder text, which is structural, you need JavaScript.