32 CSS Search Box & Search Bar Designs
Compact Toolbar
Search slotted between filter chips and an action button — the toolbar pattern most apps actually need.
Compact Toolbar the 18th of 32 designs in the 32 CSS Search Box & Search Bar Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<form class="csb-tool" role="search">
<span class="csb-tool-chip" role="button" tabindex="0">All</span>
<label class="csb-sr" for="csb-tool-i">Search</label>
<input id="csb-tool-i" type="search" name="q" placeholder="Search..." />
<button type="button" class="csb-tool-action" aria-label="Filters">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M7 12h10M11 18h2" /></svg>
</button>
</form> .csb-tool {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px;
background: #1a1a28;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
}
.csb-tool:focus-within { border-color: #7c6cff; }
.csb-tool-chip {
padding: 5px 10px;
background: rgba(124,108,255,0.15);
color: #a78bfa;
border-radius: 6px;
font: 600 11px/1 system-ui, sans-serif;
cursor: pointer;
}
.csb-tool input {
flex: 1; min-width: 160px; padding: 5px 6px;
border: 0; outline: none; background: transparent;
color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-tool input::placeholder { color: #b8b6d4; }
.csb-tool-action {
width: 28px; height: 28px;
border: 0; cursor: pointer;
background: rgba(255,255,255,0.05);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
}
.csb-tool-action:hover { background: rgba(255,255,255,0.1); }
.csb-tool-action svg { width: 14px; height: 14px; fill: none; stroke: #cbd5e1; stroke-width: 2; stroke-linecap: round; }
.csb-sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}