The Squarespace 7.1 search block uses .sqs-search-page-input for the input field and .sqs-search-page-results for the results list. The default search bar is minimal and often needs restyling.
Create a more prominent search experience with a larger input, visible border, and custom placeholder text styling. The search icon is an SVG inside the button that responds to fill color changes.
.sqs-search-page-input input {
border: 2px solid #ddd !important;
border-radius: 4px;
padding: 14px 20px;
font-size: 16px;
width: 100%;
transition: border-color 0.2s ease;
}
.sqs-search-page-input input:focus {
border-color: #111 !important;
outline: none;
}
.sqs-search-page-input input::placeholder {
color: #aaa;
font-style: italic;
}
.sqs-search-page-results .search-result {
padding: 20px 0;
border-bottom: 1px solid #eee;
}Enhance your blog with our Blog Sidebar toolTry it free →
