How to customize the search bar in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

In this tutorial, I am going to walk you through some CSS codes you can use to style the search bar on your Squarespace website. We can change all kinds of things like colors, borders, and even add some neat text effects!

This tutorial also covers the search results preview options so we can apply your branding to just about everything for your on-site search bar.

Now there are a lot of codes involved so I went ahead and wrote them all down for you below! Be sure to watch the video so you understand how to use them & customize them to make your site uniquely yours.

Change the background of the entire search bar

.search-input {
background-color: #50bdb8!important;
}

Remove the top, left and right border, leaving an underline

.search-input {
border-left: none!important;
border-top: none!important;
border-right: none!important;
border-bottom: 2px solid #50bdb8!important
}

Change the color of the search text

.search-input { color: #50bdb8!important }

Hide the search icon

.search-input { background-image: none!important }