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:

Tim

A .NET, PHP, Marketing Guru authority, at least I hope I am. Reach me at tboland@gmail.com

5 thoughts on “Creating An Apple Like Search Box

  1. 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 🙂

  2. How can I get this to work with FreeFind?

    Or does anyone know of a site search engine provider that is compatible with
    this example?

    I want to put a site search engine on my site and I would prefer to use the
    MacOS X look & feel… however FreeFind wanted me to use a regular edit field box
    So I think I need to find another provider…. any ideas?

Leave a Reply

Your email address will not be published. Required fields are marked *