OS X style searchbox

Posted on August 05, 2005

I like the OS X GUI searchboxes. Here's a cross-browser version.

osx_searchbox
Search box in iTunes.

The OS X search box is an integral part of the OS X UI, and can be seen in a wide range of Macintosh software. It has an magnifying glass icon on the left of the input field, which serves as a pulldown for options/recent search terms. There is an optional placeholder ("Google" in the Safari Google search box). If there is user input in the textfield, a 'clear' button appears to the right of the text.

The OS X WebCore allows developers access to OS X-style search boxes in Safari, using proprietary HTML attributes.

<input type="search" placeholder="Search..." ¬
	autosave="bsn_srch" results="5" />

If you're in Safari 1.2 or higher, the result looks like this:

Users of all other browsers should see a normal text input field; the mark-up is simply ignored.

I've only really seen this implemented on the Apple website, and on a handful of mac-oriented blogs. However, with some CSS and Javascript, it's possible to give non-safari users a dash of mac elegance.

Consider the following markup:

<span class="sbox_l"></span>
<span class="sbox"><input type="search" id="srch_fld" ¬
	placeholder="Search..." autosave="bsn_srch" ¬
	results="5" /></span>
<span class="sbox_r" id="srch_clear"></span>

When the following stylesheet is applied, we achieve an visual effect similar to the apple search box.

span.sbox_l  {
	background: white url('srch_l.gif') ¬
		no-repeat top left;
	float: left;
	width: 19px; height: 19px;
}

span.sbox_r  {
	background: white url('srch_r.gif') ¬
		no-repeat top left;
	float: left;
	width: 19px; height: 19px;
}

span.sbox input {
	background: white url('srch_bg.gif') ¬
		repeat-x top left;
	float: left;
	border: 0;
	height: 19px; width: 142px;
	padding: 3px;
	font: 11px/13px arial;
	color: #000;
}

The two spans surrounding the textfield are given size and background images that provide the rounded ends. The textfield borders are removed and it is given a repeating background. Here's what the result looks like in your browser:

double ends in safari!
The effect in safari.

The problem is already clear for safari users; the rounded corners are now doubled-up! We can solve it with some browser-specific javascript. First we split the stylesheet into 3 separate external files; default.css contains the standard styles, dummy.css only contains a css comment, applesearch.css contains the non-safari mark-up.

The first two are linked in the head.

<link rel="stylesheet" type="text/css" ¬
	href="default.css" name="default"  />
<link rel="stylesheet" type="text/css" ¬
	 href="dummy.css" id="dummy_css"  />

Followed by an external javascript.

<script type="text/javascript" src="applesearch.js" ¬
	/></script>

To initialise the search box when the document is loaded, the following javascript is added to the head.

<script type="text/javascript">
//<![CDATA[
	window.onload = ¬
		function () { applesearch.init(); }
//]]>
</script>

The init function checks the browser and loads the applesearch.css stylesheet if applicable (ie. DOM-enabled and non-safari).

If we add the following event handler to the input field, the "clear/delete" button appears when text is entered. Check out the code in applescript.js

onkeyup="applesearch.onChange('srch_fld','srch_clear')"

Here's the full example,
and a zip archive to download.

I've implemented the search box on my start page

NOTE: This won't validate as XHTML because Apple's proprietary attributes are not recognised.



Comments (49)

digdog said

You may try to use some DOM scripts to add the attribute when user using Safari browser, this could avoid the validate issue you mention.

Posted by: digdog at August 5, 2005 08:02 PM .

timg said

digdog spills the beans!
http://homepage.mac.com/digdog/thinkdifferent/
Now that explains everything!

(and thanks for the tip. so simple!)

Posted by: timg at August 6, 2005 08:32 AM .

Jake Tracey said

Damn good tip, I love these searchboxes compared to the drag defaults.

Posted by: Jake Tracey at August 7, 2005 06:44 AM .

Marvo said

Thanks for the tip. Ever since I saw the Apple search field at Binary Bonsai, I've been wondering how to do them.

Posted by: Marvo at August 8, 2005 02:32 PM .

Karan said

Why exactly do we need the dummy?
I know we need it because, on removing it, there was no Apple-style any more. But what magic trick does a comment play?

Posted by: Karan at August 8, 2005 06:22 PM .

M. P. said

Safari 1.2.2 on 10.3.4 seems to use the default field instead; the custom search field looks okay but not perfect (the actual field has a 1 px border and, accordingly, the bottom doesn't quite align).

Also, the custom version doesn't show at all in IE 5.2 (js bug). But that browser is dead, so…

Works perfectly on FF PC however. :)

Posted by: M. P. at August 8, 2005 06:55 PM .

Patrick Haney said

Just FYI, it doesn't seem to work in Opera for Windows or OS X. I'm using 7.54, which is a bit out of date, but I assume that newer versions of the browser won't work properly either.

At any rate, it looks good on the other browsers I tried, especially Safari.

Posted by: Patrick Haney at August 8, 2005 09:04 PM .

timg said

I'm running Opera 8.02 on OS X 10.3.9 and it works for me. Unfortunately I don't have an older version; I always thought Opera users would generally update quickly ;)

BTW: Looks like Patrick's the man for testing cross-browser compatibility:
http://patrickhaney.com/didyouknow/4/

Posted by: timg at August 8, 2005 09:08 PM .

Rich said

Although this site is not yet complete, I have implemented a mac osx search box very simply by using a background image and a carefully placed transparent text box in a div.... you can check it out at www.destinylabs.com. I will post a link for the source shortly.

Posted by: Rich at August 18, 2005 01:50 AM .

trovster said

Pretty cool, how about combining the images, so you don't get a load time after typing in a letter... very nice though.

Posted by: trovster at August 18, 2005 11:20 AM .

Alex said

Curiously, it has some glitches in the latest nightly builds of Camino: the left and right images appear slightly (1-2 pixels, I'd say) misaligned with the central field. I thought I did something wrong when I implemented it into my blog, but the same problem affects your site, so I'm pretty sure it's a browser problem.

Anyway, a really great piece of work. Thanks a lot for sharing it with us!

(one last thing: I guess the pull-down menu for recent searches is a webcore feauture, since it appears in Safari alone... am I right?)

Posted by: Alex at August 18, 2005 12:51 PM .

Zooley said

I really liked this script and got playing with it last night. I made an alternate version that uses a form complete with label and submit button that validates as XHTML strict and uses unobtrusive javascript. It worked nicely in the latest versions of:

Safari
Firefox (win and mac)
Mozilla (win and mac)
IE Windows (6, 5.5, 5.0)
Netscape
Opera (win and mac)
Shiira
Avant browser
Camino - Camino puts a white 1px border around the input field that stubbornly won't go away. Otherwise, everything works
iCab works but looks mucked up.
And IE Mac 5 degrades gracefully.

If anyone is interested in the script:

http://zooley.net/downloads/searchbox.zip

Posted by: Zooley at August 18, 2005 05:42 PM .

timg said

I've been offline for 2 weeks (on holiday), and have been able to answer the comments until now.

@Alex: You're right, the pulldown for recent searches is a webcore feature. I didn't bother even trying to implement it for firefox/ie (using cookies/layers etc.) because firefox saves recent entries into a field and provdes the pulldown anyway.

@Zooley: Great stuff! Much improved version of my script with conscientious exception handling. You can see it here.

Posted by: timg at August 31, 2005 09:28 AM .

Egidio Murru said

This article is translate in Italian to following link:

http://www.sickbrain.org/?document_id=84&topic_id=7&page=0

Bye :-)
Egidio

Posted by: Egidio Murru at September 2, 2005 09:20 PM .

Egidio said

This article is translate in Italian to following link:

http://www.sickbrain.org/?document_id=87&topic_id=8&page=0

Thank.

Posted by: Egidio at September 21, 2005 09:16 PM .

Ricky Romero said

If you look at my site Studio Widgets, you can see how I've made the search box XHTML compliant using JavaScript. :-)

Posted by: Ricky Romero at September 29, 2005 11:27 AM .

Peter V. said

Cool stuff - very cool. Does anybody know how we can get this same search box in Flash?

Posted by: Peter V. at November 28, 2005 10:20 AM .

jespern said

@Zooley:

Your script does not work in the latest version of Opera. It throws an exception saying document changes are not allowed. DOMException, i.e. :-)

Posted by: jespern at January 12, 2006 11:43 AM .

Timo said

This is exactly what I've been looking for!
is someone experienced enough to give me some pointers on how to implement that in to a WordPress blog? (k2 powered blog)

Any help is much appreciated.

Posted by: Timo at April 25, 2006 03:20 AM .

keith said

does anyone else have a problem with this working correctly in FF Mac, basically I'm not seeing the little "reset" image on the right hand side.

i've had to impletment something very similar but run into this FF issue. From what I can gather so far it's a problem with the onkeyup event.

i'd like to know if anyone else is having a similar issue.

cheers, keith

Posted by: keith at May 3, 2006 05:35 PM .

bsn said

@keith:

I can't seem to reproduce the problem on FF 1.5 (Deerpark) or FF 1.0.6 ...

Posted by: bsn at May 3, 2006 05:39 PM .

Markus said

Just as Timo, I also like to use Zooleys updated version of the Safari styled searchbox with wordpress/k2 theme.

Anyone who has integrated that version successfully?

Thanks, Markus

Posted by: Markus at July 9, 2006 06:33 AM .

Abhishek Nandakumar said

Pretty neat! Though I managed to combine this and google sitesearch, I feel it could be easier. Probably a JavaScript that loads externally. Like in Google Analytics.

Posted by: Abhishek Nandakumar at August 7, 2006 03:04 PM .

Ceriel said

At http://www.vakantieland.nl/ Zooleys version has been successfully integrated, although some script changes have been made to more closely mimic safari's search box. For example focus the search box after pressing the clear button instead of setting the label text. Another enhancement is honouring the default value of the search box when specified. In the old version, the default value was not shown in non safari browsers. Changed also is the behaviour to allow empty search boxes to be submitted. And a javascript exception (colorLabel not defined) was being caught when doing so.

Posted by: Ceriel at March 29, 2007 09:38 AM .

Jj said

thx a lot for the tips, but does anyone tried to include this in a joomla! template on his own ? I'm working on css / html as newbie there, and I'd like to integrate that searchbox.. any clue ?
thx a lot ! :thumbs up:

Posted by: Jj at April 5, 2007 12:11 AM .

Damon said

Hi

It would be nice if this curved searchbox design could also be used as a normal text input or password input box.

I modified the code which changed the default text 'Search' to what i wanted it to be, but Safari insisted it was still meant for searching complete with recent search history dropdown! I then tried to change the reset button that appears into a more user-friendly orange submit arrow (like the one used top left in Safari) but my insufficient coding knowledge defeated me at this point as it appears Clear and Submit are very different subroutines to code. Any help would be appreciated.

Posted by: Damon at April 7, 2007 10:15 AM .

iSynth said

hello! did anybody had a chance to implement this great solution into wordpress?

Posted by: iSynth at May 5, 2007 08:17 PM .

Sunday said

Excellent, thank you very much i have one question though i have tried to put the box on the right hand side of the page and it does not do it properly how can i do that, please can someone help me

Posted by: Sunday at May 17, 2007 10:14 PM .

Diran said

Thank you VERY VERY much for this script. It really helps me promote mac when I design sites. It's these little details that make sites so unique.

Posted by: Diran at June 8, 2007 11:15 PM .

Dave said

You made my day. :D Putting it on www.codez4mac.com

Posted by: Dave at June 19, 2007 12:08 AM .

ajith said

Pretty neat!... :) ... thanxxxxxxx... :)

Posted by: ajith at June 20, 2007 08:46 AM .

Mark said

&Wow, thanks. Unfortunately I had to resort to the safari-only method for my wordpress blog. I tried Zooley's method, putting the css and javascript refs in header.php and editing my searchform.php file, but the appearance was only good in safari, not firefox, and search was broken in both. I think I am still confused as what my searchform.php file should contain...this is what I had:

form id="searchform" action="?php echo $_SERVER['PHP_SELF']; ?>"
fieldset>
label for="query">Search /label>
input type="text" name="query" id="query" value=" ?php echo wp_specialchars($s, 1); ?>" />
input type="submit" name="submitquery" id="submitquery" value="Go" />
/fieldset>

And this is in my header.php file:

link rel="stylesheet" type="text/css" href="?php bloginfo('template_url'); ?>/includes/default.css" id="default" />
!-- dummy stylesheet - href to be swapped -->
link rel="stylesheet" type="text/css" href=" ?php bloginfo('template_url'); ?>/includes/dummy.css" id="dummy_css" /;

script type="text/javascript" src="?php bloginfo('template_url'); ?>/includes/applesearch.js">

It's probably something blazingly obvious, I'm new to this sort of thing.

Posted by: Mark at June 21, 2007 03:54 AM .

Mark said

Wow, thanks. Unfortunately I had to resort to the safari-only method for my wordpress blog. I tried Zooley's method, putting the css and javascript refs in header.php and editing my searchform.php file, but the appearance was only good in safari, not firefox, and search was broken in both. I think I am still confused as what my searchform.php file should contain...this is what I had:

form id="searchform" action="?php echo $_SERVER['PHP_SELF']; ?>"
fieldset>
label for="query">Search /label>
input type="text" name="query" id="query" value=" ?php echo wp_specialchars($s, 1); ?>" />
input type="submit" name="submitquery" id="submitquery" value="Go" />
/fieldset>

And this is in my header.php file:

link rel="stylesheet" type="text/css" href="?php bloginfo('template_url'); ?>/includes/default.css" id="default" />
!-- dummy stylesheet - href to be swapped -->
link rel="stylesheet" type="text/css" href=" ?php bloginfo('template_url'); ?>/includes/dummy.css" id="dummy_css" /;

script type="text/javascript" src="?php bloginfo('template_url'); ?>/includes/applesearch.js">

It's probably something blazingly obvious, I'm new to this sort of thing.

Posted by: Mark at June 21, 2007 03:54 AM .

Rutger said

Thanks! However with Safari 3 beta i do get the doubled corners like you've mentioned. Any suggestion on how to fix it?

Posted by: Rutger at June 30, 2007 07:54 PM .

Jon said

I've been idly playing with a way to do this (more of just having a background image in the input) and came across this page.

Wouldn't a simple fix for the doubled corners is to remove the 'special markup' mentioned at the beginning? The markup would be non-specific to any browser, with the resulting CSS creating the same visual style.

I don't know if Safari has any special functionality with that search bar, but if the goal is consistent visual style, then CSS should be able to handle it just fine.

(Disclaimer: I haven't tried any of this yet.)

Posted by: Jon at July 9, 2007 07:46 PM .

Fang said

Hi.

Would anyone know, how to check the event when safari search input is reseted. I.e. when the close button (cross) is clicked?

Thx
Fang

Posted by: Fang at July 12, 2007 07:16 PM .

Max said

I've had mixed results in trying to implement this creative solution. The original code does not pass XHTML validation. Zooley's version looks promising, but I have only gotten to display properly in Safari. I am currently trying to apply "Zooley's version" as implemented by http://www.vakantieland.nl/.

Does someone have a working cross-browser version they are willing to share? I also noticed that www.filemaker.com has an elegant searchbox solution. It appears they are using a home-grown solution with some dependence on scriptaculous. Any of you JS gurus care to extract a solution from this and share it with the rest of us?

Posted by: Max at July 13, 2007 10:08 PM .

Rush said

I think you took a good stab at this, but the code could be structured a bit differently so that the result would be more flexable. I played around with this a bit to use in a project I'm working on & I opted for a slightly different approach. This is just a start to what I plan, but the code does what you have so far.

JS:

function IsSearchActive(obj)
{
var btn = document.getElementById("sbBtn");

if (obj.value)
{
if (btn.className == "sbRightEmpty")
{
btn.className = "sbRightDelete";
btn.onclick = new Function("btnClicked(this)");
}
} else {
btn.className = "sbRightEmpty";
btn.onclick = null;
}
}

function btnClicked(obj)
{
var fld = document.getElementById("tbSearch");

fld.value = "";
obj.className = "sbRightEmpty";
obj.onclick = null;
}

HTML:

Wouldn't display here, but it's just a simple table with 1 row & 3 columns. Changed onkeyup call to onkeyup="IsSearchActive(this)" and added classes to td tags.


I won't post the CSS since that should be obvious, but this approach seems more efficient to me. I opted for tables over inline code for stability. CSS float just has strange effects in some browsers. Also a lot less javascript is needed to implement - and I'd suggest using .png over .gif for the background images. Alpha channels would be very useful here, and if you noticed, Apple uses .png images for that. Just a tip & my 2 sense for what it's worth. cheers

Posted by: Rush at July 26, 2007 04:23 AM .

Rush said

I think you took a good stab at this, but the code could be structured a bit differently so that the result would be more flexable. I played around with this a bit to use in a project I'm working on & I opted for a slightly different approach. This is just a start to what I plan, but the code does what you have so far.

JS:

function IsSearchActive(obj)
{
var btn = document.getElementById("sbBtn");

if (obj.value)
{
if (btn.className == "sbRightEmpty")
{
btn.className = "sbRightDelete";
btn.onclick = new Function("btnClicked(this)");
}
} else {
btn.className = "sbRightEmpty";
btn.onclick = null;
}
}

function btnClicked(obj)
{
var fld = document.getElementById("tbSearch");

fld.value = "";
obj.className = "sbRightEmpty";
obj.onclick = null;
}

HTML:

Wouldn't display here, but it's just a simple table with 1 row & 3 columns. Changed onkeyup call to onkeyup="IsSearchActive(this)" and added classes to td tags.


I won't post the CSS since that should be obvious, but this approach seems more efficient to me. I opted for tables over inline code for stability. CSS float just has strange effects in some browsers. Also a lot less javascript is needed to implement - and I'd suggest using .png over .gif for the background images. Alpha channels would be very useful here, and if you noticed, Apple uses .png images for that. Just a tip & my 2 sense for what it's worth. cheers

Posted by: Rush at July 26, 2007 04:31 AM .

Rush said

Sorry for the double-posting. Got a script timeout error from this server & it apeeared that my post failed.

Hope it doesn't seem that I was knocking your code btw. It's been a long day & I was just pointing out an approach that will work better for my situation.

Posted by: Rush at July 26, 2007 04:46 AM .

Shaun Lewis said

Instead of switching out a dummy stylesheet, wouldn't it be easier and less intrusive to just use some javascript to add a link element to the head section? That way you don't have to worry about keeping track of a fake document. In case you want it, here it is...


In "applesearch.js", Replace this:

// add style sheet if not safari
var dummy = document.getElementById("dummy_css");
if (dummy) dummy.href = "applesearch.css";


With this:

// add style sheet if not safari
var appleStyle = document.createElement('link');
appleStyle.rel = 'stylesheet';
appleStyle.type = 'text/css';
appleStyle.media = 'screen';
appleStyle.href = 'applesearch.css';
document.getElementsByTagName("head")[0].appendChild(appleStyle);

Make sure you have the correct HREF for the new stylesheet! In other words, if it's in any subfolders or named soemthing different, you'll need to put the correct path in the code. For example, in Zooley's code, the path would be "includes/applesearch.css" Not hard though, so no worries. Enjoy!

Posted by: Shaun Lewis at August 3, 2007 10:57 PM .

Niels said

top.location.href = 'http://www.cbra.dk/';

Posted by: Niels at August 4, 2007 04:30 PM .

afshin said

I am very new to WEB development; however isn't there a way some one could make an object so it could be added to your tool's kit and just drag and drop...
or am I too optimistic?

Posted by: afshin at September 9, 2007 07:08 AM .

patrick h. lauke said

worth noting that the illusion of the nice search box disappears if a user changes their text size...apart from that, nice one.

Posted by: patrick h. lauke at October 7, 2007 02:03 PM .

danny said

Who knows how to display latest results on a window, like on the official apple site?
Cheers

Posted by: danny at November 18, 2007 11:43 AM .

Sophiehound said

This is great and works well until I put rollover images in the page. This just stops the search box working in any browser other that Safari altogether. I am using tables and traditional rollovers in the page because of some other restrictions, so I need a fix for the search box rather than changing the foundation of the site. I don't understand what could be getting in the way because right up until putting those rollovers in all is working as per the example. Hope someone can help?!?

Posted by: Sophiehound at December 6, 2007 09:51 PM .

Gerald P. said

This is cool. I have implemented the Zooley version and I modified the applescript.js according Shaun Lewis, the searchbox works fine in Safari3, Firefox2.0.0.11, Navigator 9 and IE6*. I was also able to validate the code. The original version did not work except for Safari and did not validate. However after re-touching the corners of the .gif's in Photoshop to match my background I found at that they do not align properly in IE6. the srch_l is not in line with the two other. This the code :






Search





Any Idea ?

So far it is looking good, I havn't try to work the search since first I have to figure out how to do it ! pretty newbie here !!!

Thanks

Posted by: Gerald P. at December 14, 2007 10:57 AM .

Gerald P. said

Did I broke something? Why the code is not displayed? hrrmm

td width="218" height="50" align="center" valign="middle">
form action="htmlFiles/utils/searchResults.html" method="get" target="content" id="searchform">
fieldset>
label for="query">Search
input name="query" type="text" id="query" value="" >
input type="submit" name="submitquery" id="submitquery" value="Go" >
/fieldset>

Posted by: Gerald P. at December 14, 2007 11:05 AM .

addi said

Hi All - thank you very much for the script, it is really helpful. To take it to the next step, has anyone tried to do display the shadow/outlined border that appears in the search box on Apple's web site?

http://store.apple.com/1-800-MY-APPLE/WebObjects/AppleStore

Posted by: addi at January 3, 2008 04:55 PM .