Like this: <input type="search">
- 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-size
you 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
appearance
. - 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 aplaceholder
alone won’t cut it, even though that’s what a lot of designs call for visually. - You get a super weird
incremental
attribute that sends a debouncedsearch
event 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.
The post What do you get for using a search input type? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.