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 👇

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.

📩 Join the inner circle to get exclusive code updates

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.b

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?