Change the Color of the Search Bar

What does this code do?

This code snippet will allow you to change the colour of the search bar in both Squarespace 7.0 and 7.1.

Note: This will not change the colour of the search icon as the icon is an image. To add a custom icon in the colour of your choice, check out this code snippet.

Video Tutorial

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Light Color Search Bar */
.sqs-search-ui-button-wrapper.color-light .search-input {
  border: 1px solid #fff !important;
  opacity: 1 !important;
}
.sqs-search-ui-button-wrapper.color-light input[type="search"]::placeholder {
  color: white;
}

/* Light Color Search Bar on Hover*/
.sqs-search-ui-button-wrapper.color-light:hover .search-input {
  border: 1px solid red !important;
  opacity: 1 !important;
}
.sqs-search-ui-button-wrapper.color-light:hover input[type="search"]::placeholder {
  color: red;
}

/* Dark Color Search Bar */
.sqs-search-ui-button-wrapper.color-dark .search-input {
  border: 1px solid #000 !important;
  opacity: 1 !important;
}
.sqs-search-ui-button-wrapper.color-dark input[type="search"]::placeholder {
  color: #000;
}

/* Dark Color Search Bar on Hover*/
.sqs-search-ui-button-wrapper.color-dark:hover .search-input {
  border: 1px solid red !important;
  opacity: 1 !important;
}
.sqs-search-ui-button-wrapper.color-dark:hover input[type="search"]::placeholder {
  color: red;
}

Customize the colours to match your brand and style.

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the colours to match your brand and style.