Search
The native search input, with the browser's clear button redrawn as a small muted cross.
Examples
Search
Anatomy
input.input[type=search] | An .input of type search. In WebKit and Blink its cancel button is replaced by a masked cross in the muted text colour. |
Accessibility
- Label it, or give it an
aria-labelwhen only an icon says what it searches. For a site search, wrap it in<search>orrole="search". - The clear button is the browser's own control, restyled; it is not keyboard-focusable, so Esc is the keyboard route.
| Key | Effect |
|---|---|
| Esc | Clears the field in most browsers (native). |
| Enter | Submits the surrounding form, if any. |