March 6th, 2006

You are currently browsing the articles from TechToolBlog written on March 6th, 2006.

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.