32 CSS Search Box & Search Bar Designs
Keyboard Hint
A subtle ⌘K kbd badge sits inside the input as a hint to power users — fades when the field is focused.
Keyboard Hint the 12th 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-kbd" role="search">
<label class="csb-sr" for="csb-kbd-i">Search</label>
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="11" cy="11" r="7" />
<path d="m20 20-3.5-3.5" />
</svg>
<input id="csb-kbd-i" type="search" name="q" placeholder="Search the docs..." />
<kbd class="csb-kbd-key">⌘ K</kbd>
</form> .csb-kbd {
display: inline-flex; align-items: center; gap: 10px;
padding: 9px 8px 9px 14px;
background: #1a1a28;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
}
.csb-kbd:focus-within { border-color: #7c6cff; }
.csb-kbd svg { width: 15px; height: 15px; fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-kbd input {
width: 200px; padding: 0;
border: 0; outline: none; background: transparent;
color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-kbd input::placeholder { color: #b8b6d4; }
.csb-kbd-key {
font-family: 'JetBrains Mono', monospace; font-size: 11px;
padding: 3px 7px;
color: #b8b6d4;
background: #0c0c12;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 5px;
transition: opacity 0.2s;
}
.csb-kbd:focus-within .csb-kbd-key { opacity: 0.3; }
.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;
}
More from 32 CSS Search Box & Search Bar Designs
Dual Tone OutlineGlitch SearchCompact MobileFocus Ring BloomInset PressedBorder TraceFloating CardAurora DriftVoice SearchLoading SpinnerExpanding InputInline Suggestions
View the full collection →