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:
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:
Popularity: 4% [?]
Sam’s random musings » Safari Search Boxes adds this Pingback:
[...] Safari Search Boxes: [...]
November 12th, 2006 at 9:43 pm
Dru adds this Comment:
I’m copying the snippet of code verbatim and it doesn’t seem to work for me. Is there a script that I need in order for the Safari-only JS to work? Great resource!
May 14th, 2008 at 9:43 pm
Richard John adds this Comment:
Dru, you’d need to give the field an id of ’s’.
e.g:
May 25th, 2008 at 12:30 pm
Victor Squire adds this Comment:
Well I have saffari 4 for windows vista and theses searches work fine in windows !
March 20th, 2009 at 2:44 pm
Arjan adds this Comment:
I’m on a Mac, but the new Safari 4 does not show a Safari-like search box on the top-right of this very site…
June 29th, 2009 at 2:05 am