Style a Search Block on Squarespace [EASY CSS]

May 22

Most people want to include a search function on their website but I’ll be honest, the Squarespace search block isn’t great.

Not only is the search function unreliable, the search box itself looks clunky and outdated. Luckily, I have some custom code that you can use to customize the style of a search box on Squarespace.

Let’s take a look…

Watch the video

Check out the YouTube video below 👇

Framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

On the page where your search block is located, hit shift + command + C (on a Mac) and bring up Google Chrome Developer Tools.

Find the target for your search box (usually .search-input) and copy and paste this into your custom CSS box (website > pages > website tools > custom css)

Next add the following code:

border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: solid 4px !important;

The code you end up with is:

.search-input {

border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: solid 4px !important;

}

This code will remove the outline of your search box and instead add an underline. Obviously you can play around with the code depending on how you want your search box to look, removing different sides of the border or making the border lines thinner or thicker.

If you want to add color to your search box, add the code:

.sqs-search-ui-button-wrapper {
background: red;
}

You can change ‘red’ for whatever you want.

Once you’re happy, hit save and whilst it doesn’t change any of the functionality of the search block, it does make it look much better.