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 says:

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

  2. Tim says:

    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 :)

  3. Programming Tutorials…

    I couldn’t understand some parts of this article, but it sounds interesting…

  4. Brian says:

    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 *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>