This content originally appeared on CSS-Tricks and was authored by Chris Coyier
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-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
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 aplaceholderalone 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 debouncedsearchevent 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.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Chris Coyier | Sciencx (2021-11-17T23:09:46+00:00) What do you get for using a search input type?. Retrieved from https://www.scien.cx/2021/11/17/what-do-you-get-for-using-a-search-input-type/
" » What do you get for using a search input type?." Chris Coyier | Sciencx - Wednesday November 17, 2021, https://www.scien.cx/2021/11/17/what-do-you-get-for-using-a-search-input-type/
HARVARDChris Coyier | Sciencx Wednesday November 17, 2021 » What do you get for using a search input type?., viewed ,<https://www.scien.cx/2021/11/17/what-do-you-get-for-using-a-search-input-type/>
VANCOUVERChris Coyier | Sciencx - » What do you get for using a search input type?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/17/what-do-you-get-for-using-a-search-input-type/
CHICAGO" » What do you get for using a search input type?." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/11/17/what-do-you-get-for-using-a-search-input-type/
IEEE" » What do you get for using a search input type?." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/11/17/what-do-you-get-for-using-a-search-input-type/. [Accessed: ]
rf:citation » What do you get for using a search input type? | Chris Coyier | Sciencx | https://www.scien.cx/2021/11/17/what-do-you-get-for-using-a-search-input-type/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.