Remove opacity on search bar

Site URL: https://perch-puma-kdgl.squarespace.com/

Hello! Is it possible to remove the opacity overlay when its not hovered over on a search bar?

You can see the one in the footer here:

https://perch-puma-kdgl.squarespace.com/

PW: Lightning2021!

Is it also possible to customize the text "Search" in the search bar?

Thanks!

Q1. Add to Design > Custom CSS

/* search bar overlay */
.sqs-search-ui-button-wrapper.color-dark .search-input {
    opacity: 1 !important;
}

Q2. Add to Last Line in Settings > Advanced > Code injection > Footer

<script>
$(document).ready(function() {
	$('input.search-input').attr('placeholder','enter new text');
});
</script>

On 7/1/2021 at 12:28 AM, tuanphan said:

Q1. Add to Design > Custom CSS

/* search bar overlay */
.sqs-search-ui-button-wrapper.color-dark .search-input {
    opacity: 1 !important;
}

Q2. Add to Last Line in Settings > Advanced > Code injection > Footer

<script>
$(document).ready(function() {
	$('input.search-input').attr('placeholder','enter new text');
});
</script>

 

Thank you! Removing the overlay worked, however, changing the Search bar text did not. The "enter new text" is supposed to be where the text is changed, correct?

When I included the code without changing any text, it still didn't change. 

On 7/12/2021 at 11:43 AM, mnewell said:

Thank you! Removing the overlay worked, however, changing the Search bar text did not. The "enter new text" is supposed to be where the text is changed, correct?

When I included the code without changing any text, it still didn't change. 

It looks like you removed/edited some code in your current code since July 1. That caused the above code didin't work

Add this new code

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

This worked. Thank you!