36 CSS Search Bars

Q: How do I build a Cmd+K command palette search bar in CSS?

Use the native ` ` element with `showModal()` — the browser handles focus trapping, backdrop rendering, and ESC-to-close for free. Listen for `keydown` on document checking `e.metaKey || e.ctrlKey` combined with `e.key === 'k'`, then call `dialog.showModal()` and prevent the browser's default find shortcut. Style the backdrop via `dialog::backdrop` with `backdrop-filter: blur()`. Focus the search input on open (`dialog.querySelector('input').focus()`), return focus to the trigger on close. Demo 01 in this collection ships the full recipe with keyboard-shortcut hint (⌘K badge) and a recent-commands list. Notion, Linear, Vercel, and Raycast all use this pattern.

Q: How do I build an Algolia-style instant search with a highlighted results dropdown?

Two layers: the visual reveal is pure CSS via `:focus-within` on the wrapper (dropdown appears when input is focused, no JS needed). The highlight-matching-text effect uses a ` ` element wrapping the matched substring, styled with an accent background. For a real integration you'd swap the static mock results for `fetch('/api/search?q=' + query)` on each `input` event with a 150-300ms debounce. Group results by category using ` ` with ` ` items and `aria-activedescendant` on the input. Demo 02 ships the visual pattern; wire your search API on top.

Q: What's the right HTML for a CSS search bar?

Wrap ` ` inside a ` ` with a real ` ` (visually hidden if needed). The `type='search'` adds a clear button on Chromium browsers and triggers correct virtual keyboards on mobile; `role='search'` is the WAI-ARIA landmark so screen-reader users can jump directly to search from anywhere on the page. Never rely on `placeholder` alone as the label — screen readers don't announce placeholders reliably and low-vision users lose the label on focus. Every demo in this collection uses this pattern.

Q: How do I make a clear button appear only when there's text in the search input?

Pure CSS, no JavaScript. Use the `:placeholder-shown` pseudo-class: when the field is empty the placeholder is shown, so `input:placeholder-shown ~ .clear { opacity: 0; pointer-events: none; }`. When the user types, the placeholder hides and the clear button becomes visible. Combine with `:has()` to drive parent state (e.g. show a border color change when there's typed content). Demo 13 ships this pattern with animation and ARIA on the clear button.

Q: How do I add a search animation when the input is focused?

Animate on `:focus` or `:focus-within`. Common patterns: a collapsed icon-only bar that expands its width to a full input on focus (`width` transition), an underline that wipes in from left to right (`transform: scaleX()` on a `::after` pseudo-element), a magnifier icon that slides and morphs into a clear-X (SVG stroke animation), an animated border trace (SVG `stroke-dashoffset` or conic-gradient with `@property`), or a soft glow ring (multi-layer `box-shadow` with `transform: scale`). All done with `transition` — zero JavaScript. Demos 06, 10, 14, 28, 31, 34 show six different focus-driven animation approaches.

Q: Are these CSS search bars accessible?

Yes. Every demo uses a real ` ` associated with ` ` inside a ` ` landmark. Voice, clear, and submit buttons have `aria-label` describing the action. Autocomplete dropdowns implement the WAI-ARIA combobox pattern (`aria-controls`, `aria-expanded`, `aria-activedescendant`, `role='listbox'` on the dropdown, `role='option'` on items). Command palette (Demo 01) traps focus inside the ` ` element, closes on ESC, and returns focus to the trigger. Every demo with motion respects `@media (prefers-reduced-motion: reduce)`. Focus rings are visible on every interactive element (2px minimum, high contrast per WCAG 2.4.11).

36 copy-paste CSS search bars where the search bar IS the primary UI — command palette (⌘K), Algolia-style instant search with highlighted results, e-commerce product search with category scope, header navbar sticky search, SaaS dashboard command search with recent + suggested, voice input, autocomplete dropdowns, filter chips, recent searches, and 27 more design and interaction patterns. Scoped under .sb-NN, prefers-reduced-motion guarded, framework-agnostic.

21 pure CSS15 light JSPublished May 4, 20265 new designs · Updated on Aug 12, 2026

01 / 36Light JSNEW

Command Palette Cmd+K Search Bar

The ⌘K palette every modern product ships — a native <dialog> that opens on Command/Control + K, filters grouped commands, pages and people as you type, moves an active option with the arrow keys through aria-activedescendant, and returns focus to the trigger on Escape. Blurred ::backdrop, a spring-in with @starting-style, and empty groups that hide themselves with :has().

PublishedAug 12, 2026

02 / 36Pure CSSNEW

Algolia-Style Instant Search with Highlighted Results Dropdown

An instant-search dropdown in the DocSearch/Algolia idiom: focus the field and a panel opens with results grouped under Products, Categories and Help articles, each row a thumbnail or icon plus title, description and the matched substring wrapped in <mark>. The reveal is :focus-within — no JavaScript at all.

PublishedAug 12, 2026

03 / 36Light JSNEW

E-Commerce Product Search Bar with Category Scope Dropdown

The retailer pattern: a department <select> on the left, the query in the middle, a solid submit button on the right, all fused into one 48px bar inside a mock storefront header. Trending suggestions open on :focus-within; the submit button spins for the round trip via a data-state flip.

PublishedAug 12, 2026

04 / 36Light JSNEW

Header Navbar Integrated Sticky Search Bar

A marketing header where the search field collapses to an icon as the page scrolls and re-expands the moment you focus it. The shrink is a real scroll-driven animation (animation-timeline: scroll()) with an IntersectionObserver fallback, so it is smooth on modern browsers and correct everywhere else.

PublishedAug 12, 2026

05 / 36Light JSNEW

SaaS Dashboard Command Search with Recent and Suggested

The persistent dashboard topbar search: focus it and a rich panel opens with Recent (clock icons), Suggested (sparkle icons) and Quick actions with real ⌘ shortcuts. Dark-first, arrow-key navigable, and mounted in a mock admin shell so you can see it in context.

PublishedAug 12, 2026

06 / 36Pure CSS

Minimal CSS Search Bar with Animated Underline

A borderless, editorial search field: no box, no shadow, just type on a hairline that draws itself outward from the centre on focus. Two stacked rules — a static hairline and an accent line scaled with transform: scaleX() — give a 60fps underline with zero layout cost.