- You get an extra-round-y appearance in Safari, which at one time matched the macOS look for search inputs, but not really anymore. I don’t hate the look, except…
- Safari totally ignores the
font-sizeyou set on it, so careful about that. Unless you smash off the round-y look with
-webkit-appearance: none—then you can, so probably 92% of all websites do this.
- You get a little × icon inside the input (when it has a value) that clears it out. This is probably the best reason to use it, and mercifiully you get to keep it even after resetting the
- You get the satisfaction of knowing that you’re using the semantically correct input type for the job, assuming you are building a thing that actually searches something.
- You get past search terms with autocomplete. Browsers store those past search terms and offer a menu for autocompleting them. I’m trying to make this a list of things that are unique to search inputs, and I can prove this happens on non-search inputs. But hey, it does make the most sense on search inputs.
- You get the pleasure of adding a role to the parent form (i.e.
<form role="search">) because that helps assistive technology announce it as a search form.
- You get to remember to add a proper
<label>to the input. Just using a magnifying glass icon or just a
placeholderalone won’t cut it, even though that’s what a lot of designs call for visually.
- You get a super weird
incrementalattribute that sends a debounced
searchevent to the DOM element itself. I guess that is useful for live search UX. But it’s non-standard and not in Firefox so probably don’t count on it (via Christian Shaefer).
- You get to live another day as a front-end developer.
Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.