The Low Down
search input type is used to designate the input as being used for search.
- Support is a bit arbitrary here as the spec doesn’t require any special treatment for search fields. Android doesn’t do anything special though, where all other browsers do.
autosaveattributes shown above are not standard. In WebKit and Blink browsers you can add the non-standard
resultsattribute to get a looking glass icon to click to see the latest searches, and
autosaveto keep them across page loads.
- Safari, Opera and Chrome (on OS X) round the corners of search inputs. These same browsers on Windows do not round the corners of the inputs. Presumably the OS X rounding is to match the look of search inputs in the operating system (Finder windows). Firefox and IE do not round corners.
- When a value is present, a gray x control shows up on the right of the input in IE, Chrome, Safari and Opera (but not Firefox or Chrome on Android) which can be clicked to clear the value. IE includes this x in non-search controls as well.
- WebKit’s special styling prevents some CSS attributes from functioning as expected: padding, font stuff (only three allowable font-sizes), border, background… You can remove special styling and limitations and return the look back to a regular text input with:
datalistto help users with common search terms.