Additional CSS

The Additional CSS field lets you add or tweak the default search styles to customize specific elements of your search interface so it blends into your website. You can find it in the Control Panel under Design & Publish → Advanced → Additional CSS, on the same tab as Callbacks & Hooks and Templates.

Use it to restyle result cards, the search box, the results overlay, buttons, and other parts of the search UI without touching your website's own stylesheet.

To apply the same styles through your embed configuration instead of the Control Panel, use the additionalCss parameter — its value must be minified. See Advanced Parameters.

---

Finding the class to target

To style an element, you first need the CSS class it uses. Open your search on your site, right-click the element you want to change, and choose Inspect to open your browser's developer tools. The highlighted node shows the classes you can target in the Additional CSS field.

Target elements by class, not by ID. ID selectors break when you rename or copy a configuration, and they do not match on landing-page searches. Every class in the reference below is safe to target.

---

Common classes to target

Every class starting with ss360- uses your configured CSS prefix, which defaults to ss360. If you have set a custom prefix, replace ss360 with it. The unibox__ classes are the exception — they are never prefixed.

Suggestions and result cards

Class	Targets
.ss360-suggests	Each individual suggestion/result card (the <li> wrapper). This is the default CSS target.
.ss360-suggests--card	The same card element, card-style modifier.
.ss360-suggests__wrap	The <article> wrapping a card's content.
.ss360-suggests__content	The inner container holding a card's content.
.ss360-suggests__header	The header area of a card containing the title link.
.ss360-suggests__link	The clickable result/suggestion title.
.ss360-suggests__snippet	The description/snippet text under the title.
.ss360-highlight	A matched search term highlighted within a title or snippet.
.ss360-no-img	Modifier applied to a card when it has no thumbnail image.
.unibox__highlight	A highlighted query term specifically within suggestion titles.
.unibox__selectable--active, .unibox__selectable:hover	A suggestion row while hovered or keyboard-selected.

Results overlay

Class	Targets
.ss360-layer	The full results overlay/modal container.
.ss360-layer__heading	The "Found X results for…" heading area.
.ss360-layer__sidebar	The filters sidebar in the results overlay.
.ss360-close-button	The overlay's close ("X") button.

Search box

Class	Targets
.ss360-custom-search	Wrapper for an inline/custom search box.
.ss360-custom-search__searchbox	The search text input itself.
.ss360-custom-search__searchbutton	The search submit button (magnifying glass).
.ss360-custom-search__clear-button	The "clear query" button inside the search box.

Buttons and calls to action

Class	Targets
.ss360-cta--button, .ss360-cta--primary	Call-to-action buttons in results (e.g. "Add to cart", "View page").

Result groups, sorting, and pagination

Class	Targets
.ss360-nav	Tabs navigation for result groups.
.ss360-group, .ss360-group--active	Individual tab items and the active tab.
.ss360-sorting	The sort-by dropdown.
.ss360-page-size	The results-per-page selector.
.ss360-pagination	Pagination controls wrapper.
.ss360-pagination__progress-bar--active	The filled portion of the pagination progress bar.
.ss360-more-results	The "Load more" button (infinite scroll mode).

States and messages

Class	Targets
.ss360-no-results	The "no results found" message block.
.ss360-loader__bounce	The loading spinner dots.
.ss360-banner	A promotional banner shown within results.
.ss360-guided-questions	The related/guided questions block.

Filters

Class	Targets
.ss360-filter-top-wrapper	Filters container when positioned above results.
.ss360-filter__backdrop	Dimmed backdrop behind filters on mobile.
.ss360-filter__delete-bar	The "clear selected filters" bar.

---

Examples

Result card and title styling:

.ss360-suggests--card {
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}
.ss360-suggests__link {
    color: #1a1a2e;
    font-weight: 600;
}
.ss360-suggests__snippet {
    color: #6b7280;
    font-size: 0.9rem;
}

Highlighting matched search terms:

.ss360-highlight {
    background-color: #fff3b0;
    font-weight: 700;
}

Hover or keyboard-selected suggestion row:

.unibox__selectable--active,
.unibox__selectable:hover {
    background-color: #f5f6fa;
}

Results overlay heading and layout:

.ss360-layer__heading {
    font-size: 1.1rem;
    padding: 16px 20px;
}
.ss360-layer__sidebar {
    background-color: #fafafa;
    border-right: 1px solid #ececec;
}

Search input and button:

.ss360-custom-search__searchbox {
    border-radius: 20px;
    padding-left: 16px;
}
.ss360-custom-search__searchbutton {
    background-color: #2d6cdf;
}

Calls to action (e.g. "Add to cart" / "View page"):

.ss360-cta--primary {
    background-color: #0f9d58;
    border-radius: 6px;
    color: #ffffff;
}

No-results and loading states:

.ss360-no-results {
    text-align: center;
    padding: 40px 0;
}
.ss360-loader__bounce {
    background-color: #2d6cdf;
}

Pagination:

.ss360-pagination__progress-bar--active {
    background-color: #2d6cdf;
}
.ss360-more-results {
    border-radius: 20px;
}

---

Prevent the search field from zooming in on iOS

On iPhones and iPads, Safari and Chrome zoom in automatically when a visitor taps a text input whose font size is below 16px. In a Site Search 360 search box, this appears as the page zooming in on tap and the layout shifting slightly off-screen.

This is standard iOS behavior, not a bug in the search box. To prevent it, set the search input font size to at least 16px:

#ss360-searchbox-container input {
    font-size: 16px !important;
}
#ss360-layer {
    --ss360-fs-md: 16px;
}
.ss360-custom-search__searchbox {
    font-size: 16px !important;
}