Creating An Apple Like Search Box

I’ve gotten an email or two about how I managed to make my search box look like an Apple MAC OS X Finder. You could view source on my site and see or how about I share it with you

Basically it is contructed by using the method: Left Round Image -> Input Text Box with special Styles <- Right Round Image

Simple enough?

Below is the CSS you will need:



/* APPLE SEARCH BOX LOOKALIKE STYLES */

.srchimgs {margin-bottom: 1px;}

.sbox {width: 121px;}

#searchform select, #searchform input {font-size: 10px}

#searchform input.sbox {color: #80808C; height: 12px; width: 95px; border: 0; background: white url(http://images.apple.com/downloads/macosx/images/downloadssearchbg20050513.gif) repeat-x left top; padding: 3px;}

#searchform select {width: 122px; margin-top: 5px;}

#searchform .srchimgs {margin-bottom: 1px;}

html>body #searchform .srchimgs {margin-bottom: 0;}

html>body*#searchform input {font-size: 12px} html>body*#searchform .srchimgs {display: none;} html>body*#searchform input.sbox {width: 121px;}

Now you must set your DOCUMENT TYPE as follows:

Here is what the HTML for the box itself looks like:


img src=”/images/leftsearch.gif” alt=”" width=”16″ height=”18″ border=”0″ align=”absbottom” class=”srchimgs”>

That’s it. Notice that you will need to edit the background color of the leftsearch.gif and rightsearch.gif images. After that you should have:

Written by Tim on March 6th, 2006 with 4 comments.
Read more articles on tools.

[+] Digg: Feature this article
[+] Del.icio.us: Bookmark this article
[+] Furl: Bookmark this article

Dealer.com - Impressed (April 10th, 2008)
Firefox 3 beta 5 mini Review (April 2nd, 2008)
Windows Live Writer Install (February 4th, 2008)
Visual Studio Color Scheme (January 22nd, 2008)
Android Developer Session (January 15th, 2008)

4 comments

Read the comments left by other users below, or:

poker casino528
#1. March 29th, 2006, at 9:33 AM.

poker casino poker 890

gustan
#2. June 24th, 2007, at 5:57 PM.

Is there any way to make this great style cross-browser compatible?

Tim
#3. June 25th, 2007, at 2:41 PM.

Gustan,
This should be cross browser, what browser is giving you trouble? Also I noticed that my new blog theme totally messed up the example. Ignore it for now

Mention from Tutorials.goodfind.org
#4. August 31st, 2007, at 8:12 PM.