A while ago I discovered that by setting an HTML INPUT tag’s type attribute to search, Safari on OS X would show the OS X search widget instead of the standard boring HTML input field. Andrew Escobar has a good introduction and an example screenshot:

This search widget is extremely user-friendly and space-efficient; there is no need for a “Go” or “Search” button anymore.
It also downgrades gracefully to a normal input field for other browsers, but this is unfortunately not enough:
- There’s no placeholder text explaining what you can search for
- There’s no magnifying glass or special styling giving a hint that this is a search box
Taken together it means you have to add explanatory text and a “Search” submit button after it for people to understand how to use it, destroying the user-friendliness and space efficiency and offered by the Safari widget.
I’ve noticed that more and more sites were using the Safari search widget without any “Search” submit button, so I figured they must have found a way to make it cross-platform. I spent some time on facebook.com today and noticed they had the Safari search widget… and… sure enough, for Firefox and IE a nice JavaScript version!
I decided to do some reverse engineering…
(more…)