Comments on: Apple’s Pretty Search Bar

By: abeyang

abeyang — Tue, 04 Aug 2009 23:06:07 +0000

@a: You’re absolutely right. However, Pretty Search was developed for my company a few years ago, thus we had to comply with W3C’s standards back then.

@Robert: Agreed. Even though it was designed specifically for my company, I made it abstract enough to be used anywhere. Unfortunately, I never got around to using it since then.

@David: That should work, too. Again, we were trying to abide by W3C’s “rules” back then, which didn’t allow for input=”search”. Rather than dealing with browsers separately, we went for a catch-all, cross-browser solution. With that said, I’m very interested to see how you implemented your own Pretty Search in IE and Firefox!

By: a

Tue, 04 Aug 2009 22:23:14 +0000

Input type=search is allowed in W3C’s HTML 5.

By: Robert Schultz

Robert Schultz — Mon, 27 Jul 2009 16:10:02 +0000

I subscribe to your blog and enjoy reading your posts :)

It would be great if you could post an ‘example’ page, to show off your cool new search bar :)

By: David Murdoch

David Murdoch — Fri, 24 Jul 2009 13:59:16 +0000

I’m using the apple “search” input style on one of the websites I just completed.

Instead of browser sniffing you may be able to use a sort of feature detection:

// try{} it to filter out IE (IE can’t change the type of an input element without an error)…
try {
var searchHeight = searchInput.offsetHeight;
searchInput.type = “search”;
// if the input type did change to “search” and the offsetHeight stayed the same
// we can use Safari “search” fields…
if ( searchInput.type === “search” && searchInput.offsetHeight === searchHeight ) {
document.getElementById(“globalsearch”).className += ” safari”;
}
else {
searchInput.type=”text”;
throw “exception”‘;
}
}
catch(e) {
setUpSearchInputForOtherBrowsers();
}

Also, “a, input, textarea, select {outline:0}” css rule should disable Safari’s and Chrome’s “glow.”