Apple’s Pretty Search Bar
At my company a few years ago, we’ve been working on some projects that require some heavy UI overhaul. One of these projects requires a “filter bar” — a search bar that filters a long list dynamically. We thought that the typical text fields would clash with the style of our design, so we opted for the Safari-esque search field with the rounded corners.
Initial Setbacks
Unfortunately, Safari is the only browser currently that (natively) offers this nice-looking search field. What to do, what to do? Well, we could simply fake it, couldn’t we? That is, we could just have a simple text input field and tack on two rounded sides on the end, no? Unfortunately, it’s not that easy. You see, in Safari, when you select an input field, it “glows”:
There were other problems that came up along the way:
- No way to disable glow in Safari, or
- no way to only make the outside glow in Safari (if we were just using a standard text input)
- Safari uses type=”search”. However, that isn’t W3C compliant.
Solution
Well, without going into all the boring details as to what we’ve done, let me just say that we’ve turned it into a generic framework, and you can download it here. A thing to note is that it requires the Mootools framework.
Implementation
We first need to reference the right files. Remember, Mootools go before prettyinput.js.
<script src="mootools.js" type="text/javascript" charset="utf-8"></script>
<script src="prettyinput.js" type="text/javascript" charset="utf-8"></script>
Next, we’ll place the input tag inside the HTML file. Note that the span element is optional — it defines the text inside the search bar.
<label for="YOUR-ID">
<span class="prettyplaceholder">Search</span>
<input id="YOUR-ID" class="prettysearch" type="text" />
</label>
Finally, let’s insert this Javascript snippet in the header.
window.addEvent('domready', function() {
new PrettyInput($('YOUR-ID'));
});
Voila! That’s it!
Compatibility
This is fully compatible with the following browsers:
- IE6+
- Firefox 2+
- Safari 2+
Download PrettySearch (15KB)
Tagged as apple, javascript, mootools, widget + Categorized as Our Projects
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.”
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 :)
Input type=search is allowed in W3C’s HTML 5.
@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!