32 CSS Search Box & Search Bar Designs
Advertisement
A CSS search box is the input where users type a query to find content on a site or in a product. These 32 hand-coded designs are ready-to-ship search bars with autocomplete, scope filters, and command-palette variants — copy the markup, wire to your search handler, and ship.
01 / 32
Minimal Underline
Pure CSS 
Borderless input with a thin bottom rule that animates outward from the centre on focus — the cleanest pattern that still signals interactivity.
02 / 32
Pill with Submit
Pure CSS 
Rounded pill shell with an inline submit button — the de facto pattern for site search and product search.
03 / 32
Glass Search
Pure CSS 
Frosted-glass shell with backdrop blur — sits beautifully over hero images and gradient backgrounds.
04 / 32
Neon Outline
Pure CSS 
Synthwave neon ring with a soft glow that intensifies on focus — built for dark dashboards and game UIs.
05 / 32
Floating Label
Pure CSS 
Material-style floating label that snaps up when the input is focused or filled — uses :placeholder-shown for a JS-free implementation.
06 / 32
Caret Highlight
Pure CSS 
On focus, a single accent line sweeps left-to-right across the bottom of the input — a one-shot reveal that signals "this field is active" without any perpetual motion.
07 / 32
Voice Search
CSS + JS 
Microphone button that pulses while "listening" — toggles a recording state that demonstrates the visual feedback pattern (not real audio).
08 / 32
Loading Spinner
CSS + JS 
Magnifying glass icon morphs into a spinner while the form is "searching" — paired with a class that simulates the loading state.
09 / 32
Clear-on-Type
Pure CSS 
An × clear button appears as soon as the user types — pure CSS via :placeholder-shown, no JS state needed.
10 / 32
Expanding Input
CSS + JS 
Compact icon-only at rest; click expands it into a full-width input. Collapses back when blurred and empty.
11 / 32
Inline Suggestions
CSS + JS 
Real autocomplete dropdown — keyboard-navigable (↑ ↓ Enter Esc) with five live results that filter as you type.
12 / 32
Keyboard Hint
Pure CSS 
A subtle ⌘K kbd badge sits inside the input as a hint to power users — fades when the field is focused.
13 / 32
Tagged Filter
CSS + JS 
Active filter chips live inside the search bar — click × on a chip to remove it. Real interaction, not a mock.
14 / 32
Recent Searches
CSS + JS 
Dropdown of recent queries on focus, with a "Clear all" action — production-grade pattern for site search and command palettes.
15 / 32
Animated Placeholder
Pure CSS 
Placeholder text cycles through example queries on a typewriter loop — pure CSS using steps() animation on a marquee track.
16 / 32
Avatar Search
Pure CSS 
Search bar with the logged-in user avatar at the right edge — common in dashboards. Subtle but communicates "this search is yours".
17 / 32
Brutalist Stamp
Pure CSS 
Hard offset shadow, zero radius, bold mono — a search bar that doesn't apologize for itself.
18 / 32
Compact Toolbar
Pure CSS 
Search slotted between filter chips and an action button — the toolbar pattern most apps actually need.
19 / 32
Hero Search
Pure CSS 
Big landing-page search with a subtle gradient halo behind it — the kind you put front-and-centre on a marketing site.
20 / 32
Side Indicator
Pure CSS 
A 3px coloured rail on the left edge of the input shifts colour on focus — minimal but unmistakable signal.
21 / 32
Drop Shadow Float
Pure CSS 
Subtle elevation lift on focus — a soft transform + larger drop-shadow makes the input feel like it raised toward the user.
22 / 32
Search + Filter
Pure CSS 
Two-column shell: input on the left, scope dropdown on the right, divided by a vertical hairline. The pattern of choice for ecommerce.
23 / 32
Inline Loading Bar
CSS + JS 
A thin progress bar slides across the bottom of the input while results are loading — gentler than a full spinner for live-search UX.
24 / 32
Dual Tone Outline
Pure CSS 
The border is split into two halves — left edge stays neutral while the right half lights up violet on focus. A subtle "active half" cue.
25 / 32
Glitch Search
Pure CSS 
RGB-split glitch shudders across the placeholder when focused — leans into a hacker / dev-tool aesthetic.
26 / 32
Compact Mobile
Pure CSS 
Mobile-first compact pattern — generous tap target, soft rounded chrome, single-line visual rhythm. Ideal for thumb-reach.
27 / 32
Focus Ring Bloom
Pure CSS 
A soft expanding violet halo blooms outward when the input gains focus — disappears smoothly on blur.
28 / 32
Combo with Scope
CSS + JS 
Scope dropdown ("All / People / Posts / Files") inline with the input — the pattern Slack, Linear, and GitHub all converged on.
29 / 32
Inset Pressed
Pure CSS 
Skeuomorphic inset shadow makes the input look pressed into the surface — a return to depth without the kitsch.
30 / 32
Border Trace
Pure CSS 
On focus, two halves of a border trace simultaneously around the input — a clean line-drawing reveal. No box-shadow, no gradients.
31 / 32
Floating Card
Pure CSS 
The whole search bar lifts off the page on focus with a soft shadow and a tiny scale-up — a tactile "pick me up" feel.
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
What's the right HTML for a CSS search box?
Wrap input type=search inside a form with role=search and pair it with a real label (visually hidden if needed). The form lets users submit with Enter; the type=search adds a clear button on iOS and triggers SMS-style suggestions on mobile; role=search is the WAI-ARIA landmark that lets screen-reader users jump directly to it.
How do I make a clear button appear only when there's text?
Pure CSS, no JavaScript: use the :placeholder-shown pseudo-class on the input. When the field is empty the placeholder shows, so input:placeholder-shown ~ .clear { opacity: 0; }. When the user types, the placeholder hides, the clear button appears. Combine with :has() to drive parent state too.
How do I add a CSS search animation when the input is focused?
Animate the search bar on :focus or :focus-within. Common search-animation patterns: a collapsed icon-only bar that expands its width into a full input, an underline that wipes in from left to right, a magnifier icon that slides and morphs into a clear (X) icon, or a soft glow ring. All of it is done with transition on width, transform, and box-shadow — no JavaScript. Several demos in this gallery show focus-driven search animations you can copy directly.
What's the difference between a search box and a search bar?
There's no real difference — search box, search bar, and search field all describe the same component: an input type=search where the user types a query. 'Search bar' usually implies a wider, full-width input (common in site headers), while 'search box' often implies a more compact one, but the HTML and CSS are identical. Every design in this gallery works at any width.
Are these CSS search boxes accessible?
Yes. Every demo uses a real label associated with input type=search inside a form role=search. Voice and clear buttons have aria-label. Autocomplete dropdowns implement the full combobox pattern (aria-controls, aria-expanded, aria-activedescendant, role=listbox/option) so screen readers announce options correctly.
Do I need JavaScript for autocomplete and recent searches?
Yes for the data, no for the visuals. The dropdowns themselves open and close via :focus-within or :checked — pure CSS. JS is only needed to filter results based on what the user typed and to persist recent searches in localStorage. Each interactive demo includes a self-contained JS snippet.
Will browser autofill work with these search boxes?
Yes. Each input keeps the native input type=search with name attribute, so browser autofill, suggestion history, and password manager search are all preserved. The custom styling never breaks native behaviour.
Related collections
22 CSS Button Group Designs
22
22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.
button group css button group segmented control
Responsive
43 CSS Button Designs
43
43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.
buttons hover animation
Responsive
20 CSS Cards with Animations
20
20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.
cards components animation
Responsive