Add Background Color to Search Bar in Squarespace with CSS
Adding a Search Bar to your Squarespace website makes it easy for your visitors to find what they’re looking for.
But the Squarespace Search Bar is pretty limited design-wise providing options for ‘Light theme’ or ‘Dark theme,’ but no option for changing the color.
In this tutorial, I’m going to show you how to change/add color to the background of the Search Bar in Squarespace using a little CSS.
But before I show you how to do this, I want to remind you that your website is a lot more than just design. It's your website's job to attract and engage your target audience.
Be sure the check out website strategy blog posts before you leave so that the Squarespace website you’re working on right now will have a strategy to attract and engage its target audience.
Add Background Color to Search Bar in Squarespace with CSS
Adding a color background to the Search Bar in Squarespace is super easy.
Select + Add Block > Search
Position the Search Bar wherever you want it to be
Edit the block and if you want to be searching the content of a specific page on your website, then select search specific page and select the page
Select ‘Display’ and decide whether you want a dark theme or a light theme
Select save
Head into pages, scroll down to Website tools > Custom CSS
Copy the code below (scroll down) and paste it right here
Change the hex code to whatever color you want it to be
So easy, right?
Code Snippet to Add Background Color to a Search Bar in Squarespace
/* Add background color to search bar */
.search-input {
background-color:#F7F1E7!important;
}
This page contains affiliate links
My Insta
@jenxwebdesign
Like this post?
