Remove Border from Search Bar

What does this code do?

This code snippet will allow you to remove one or all of the borders around a search bar.

 

Code Snippets

To remove all the borders from a search bar, copy and paste this code into Design > Custom CSS.

/* Remove All Borders from Search Bar */
.search-input {
  border: none !important;
}

To remove some of the borders from a search bar, copy and paste this code into Design > Custom CSS.

/* Remove Some Borders from Search Bar */
.search-input {
  PASTE CODE HERE
}

Then paste in the borders you want to remove.

border-top: none !important;
border-bottom: none !important;
border-right: none !important;
border-left: none !important;

For example, if I wanted to remove the top, left, and right borders I would use the following code.

/* Remove Some Borders from Search Bar */
.search-input {
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
}
 

How To Use It

  1. Copy and paste the code as indicated above.

Rebecca Grace

Rebecca Grace is a Squarespace CSS Expert and Website Designer.

https://rebeccagracedesigns.com
Previous
Previous

How to Use Font Awesome in Squarespace

Next
Next

Remove Spacing Between the Site Title and Navigation