4 Pure CSS5 with JSPublished 2026-10-04Free · no sign-up
Nine search patterns: a pill bar with a button, an icon that expands into a field, a suggestion list using the combobox pattern, a Ctrl+K command palette, a search with a department select, a glass hero search, voice and clear buttons, a live filter with a result count and a minimal underline field.
A rounded search bar with the input and a Search button joined into one pill. The form has role="search" so it is a landmark, the input has a hidden label, and the whole bar shows a focus ring when the field is focused using :focus-within.
A compact search that starts as a round icon and widens into a full field when focused, saving space in a busy header. The width animates on :focus-within, and because the input is always in the DOM the icon is reachable and labelled from the start.
A search box that filters a list of suggestions as you type, following the ARIA combobox pattern: aria-expanded, aria-controls and aria-activedescendant. Arrow keys move through the matches, Enter picks one and Escape closes the list.
A command palette like those in code editors: a dialog with a large search field, grouped results and keyboard hints. It opens with Ctrl+K or the button, uses the native dialog element for focus handling, and the results filter as you type.
View code
<button class="cp-open" id="cp-o">Search <kbd>Ctrl K</kbd></button>
<dialog class="cp" id="cp" aria-label="Command palette">
<input id="cp-q" placeholder="Type a command or search" aria-label="Command">
<ul id="cp-l">
<li>New product</li><li>New discount code</li><li>View orders</li><li>Open settings</li><li>Invite a teammate</li>
</ul>
<p class="hint"><kbd>Esc</kbd> to close</p>
</dialog>
A marketplace-style search that lets people choose a department before searching. The select and input share one rounded border, each has its own label for screen readers, and the group stacks on narrow screens so neither control gets squeezed.
A large search field set over a colourful hero background, with a frosted-glass bar and quick suggestion chips below it. The chips are buttons that fill in the search term, which is a quick way to help people who are unsure what to type.
A search field with two trailing icon buttons: a microphone and a clear button that appears only when there is text. Both buttons have accessible names; the microphone here is a visual placeholder for wiring up the Web Speech API in your own app.
A filter box above a list that hides non-matching items as you type and reports how many remain, such as 3 of 8 products. The count sits in a polite live region, so screen reader users hear the result without losing their place in the field.
const fq = document.getElementById('sr-q'), items = [...document.querySelectorAll('#sr-l li')];
fq.addEventListener('input', () => {
const v = fq.value.trim().toLowerCase(); let n = 0;
items.forEach(li => { const hit = li.textContent.toLowerCase().includes(v); li.hidden = !hit; if (hit) n++; });
document.getElementById('sr-n').textContent = v ? n + ' of ' + items.length + ' products' : items.length + ' products';
});
09. Minimal Underline Search
MinimalHeader
A quiet search for editorial sites: no box, just a large underlined field with a trailing arrow button. The underline thickens and changes colour on focus, which keeps the minimal look while still giving keyboard users a clear focus cue.
View code
<form class="su" role="search" onsubmit="event.preventDefault()">
<label for="su-q" class="sr">Search the journal</label>
<input id="su-q" type="search" placeholder="Search the journal">
<button aria-label="Search">→</button>
</form>
Wrap the field in <form role="search"> so assistive technology lists it as a landmark, and give the input a label, even if it is visually hidden. type="search" brings the right mobile keyboard with a search key.
Suggestions need the combobox pattern
A suggestion list should use role="combobox" on the input with aria-expanded, aria-controls and aria-activedescendant, and role="listbox" on the list, so arrow keys and screen readers work together.
Announce result counts
When results filter as you type, report the count in a polite live region, for example 3 of 8 products, so screen reader users know the list changed without leaving the field.
Help people start
Quick suggestion chips, recent searches or a helpful placeholder reduce the blank-box problem. Chips should be buttons that fill in the field, as in the glass hero demo.
Frequently asked questions
Which demos use JavaScript?
Suggestions, command palette, voice and clear, chips and the results filter. The pill, expanding, category and underline searches are pure CSS.
Does the voice button work?
It is a visual placeholder; connect it to the Web Speech API in your app.
How do I open the palette with Ctrl+K?
Listen for keydown with ctrlKey or metaKey and the k key, then call showModal(), as the demo does.