← All elements
<div class="sg2"><input placeholder="Search elements" aria-label="Search"><ul><li><b>but</b>ton</li><li><b>but</b>ton group</li><li><b>but</b>terfly loader</li></ul></div>About this layout
A search field that opens a suggestion list on focus, with a highlighted match and rounded results panel.
How it works
The suggestion list is hidden and appears when the wrapper has focus inside it. A bold span highlights the matching part of each suggestion. The input gets a soft focus ring.
Ways to customise it
- Edit the suggestions.
- Change the focus colour.
- Make suggestions links.
Good to know
A real combobox needs ARIA roles and script for filtering. This shows the visual design. Keep the input labelled.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.