Safari Search Boxes

I ran across a surprising little feature in Safari. If you change a standard:

<input type="text" />

field to a “search” box like so:

<input type="search" />

In Safari, it is magically transformed from a standard input field to a “search box”. It can also have added functionality like remembering previous searches with an extra attribute:

<input type="search" results="5" />

Here is a screenshot:

Search boxes in Safari

and here is a live demo page.

This seems to degrade gracefully as a normal text field as well. Tested in:

  • Safari (of course)
  • Camino
  • Firefox
  • IE 6
  • IE 7
  • Opera 9

This, of course, is not valid XHTML. However, it could be hacked around with a little JavaScript for Safari only. I’ve done so for the search box in the upper right column on my site using the following JavaScript code:

if (safari) { var s = document.getElementById('s'); s.type = 'search'; s.setAttribute('results', '5'); }

Seems to work just fine.

UPDATE: for those of you not on a Mac, here is a screenshot of it in Safari:

Safari Search Box Implemented