Search Box and Dropdown Customization

This page covers the search entry area: input, dropdown panel, and breakpoint-specific behavior.

What you can change

• input border, radius, typography,
• dropdown shadow and layering,
• mobile-specific sizing,
• per-view differences between search_box and search_dropdown.

Example

/* Root-level scope (works for both search_box and search_dropdown) */
.kea-search.kea-search--widget,
.kea-search.kea-search--combined {
  --kea-radius-md: 12px;
  --kea-shadow-panel: 0 10px 28px rgba(0, 0, 0, 0.16);
}

/* Search shell */
.kea-search-box-wrapper {
  z-index: var(--kea-z-dropdown, 1000);
}

/* Input field inside the active root */
.kea-search-box-wrapper input[type="text"],
.kea-search-box-wrapper input[type="search"] {
  border: 1px solid var(--kea-color-border, #e8e8e8);
  border-radius: var(--kea-radius-md, 4px);
  color: var(--kea-color-text, #0f0f0f);
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
  .kea-search-box-wrapper input[type="text"],
  .kea-search-box-wrapper input[type="search"] {
    font-size: 16px;
  }
}

Documented selectors and markers for this block

• Root classes: .kea-search, .kea-search--{mode}, .kea-search-canvas, .kea-search-box-wrapper, .kea-search-dropdown, .kea-reset.
• Root markers: data-kea-version, data-kea-view, data-kea-screen (also available as .kea-screen-{screen} class), data-kea-mode (also as .kea-search--{mode} class), data-kea-layout, data-kea-breakpoint, data-kea-preview. For broad styling, prefer the class composition over the data-attribute form.

If styles do not apply

• Verify the active root class composition on the mounted root (.kea-search.kea-search--{mode}...).
• Check CSS load order.
• Check competing z-index/focus rules from storefront theme.