Search Block Elements
COMPONENT SELECTOR GUIDE
Search Block Elements
Relevant CSS Selectors
CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
---|---|---|
.sqs-block-search | The search blocks container. |
![]() |
.sqs-search-ui-button-wrapper | The search input wrapper. This element has a class name that correpsonds to the color theme being used. |
![]() ![]() |
.sqs-search-ui-button-wrapper.color-dark | The "Dark" search input wrapper. |
![]() |
.sqs-search-ui-button-wrapper.color-light | The "Light" search input wrapper. |
![]() |
.sqs-block-search .search-input | The search input field. |
![]() |
HTML Structure Explanation
The HTML structure of the search block elements.
The HTML structure of the search block elements.
Unique Search Blocks Using the Block ID
Relevant CSS Selectors
CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
---|---|---|
#block-yui_3_17_2_1_1698185483093_9220 | Targets a unique Squarespace element using its unique ID attribute. The selector in the left column is just the general form of the block ID, but the characters that come after "#block-" will be different for each element. |
![]() |
HTML Structure Explanation
Every Squarespace block element, such as the Search Block, will have a class name of “.sqs-block”. This element will additionally have an ID attribute that begins with “block-” and ends with a random string of characters as pictured below.
An Search block element with a class name of “sqs-block” and an id attribute.