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 12 comments.
Read more articles on tools.



Related articles

12 comments

Read the comments left by other users below, or:

Get your own gravatar by visiting gravatar.com poker casino528
#1. March 29th, 2006, at 9:33 AM.

poker casino poker 890

Get your own gravatar by visiting gravatar.com gustan
#2. June 24th, 2007, at 5:57 PM.

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

Get your own gravatar by visiting gravatar.com 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 :)

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

Programming Tutorials: Programming Tutorials... I couldn't understand some parts of this article, but it sounds interesting...

Get your own gravatar by visiting gravatar.com Jay
#5. June 26th, 2010, at 2:08 PM.

It doesn’t work in Firefox 3.6.3.

Get your own gravatar by visiting gravatar.com Tiran
#6. December 30th, 2010, at 12:45 PM.

What shold happen. I see no Apple search box

Get your own gravatar by visiting gravatar.com new era hats
#7. April 22nd, 2011, at 12:56 AM.

when we visit this new era store online, we see so many new era hats cheap there, and new fashion new era hats wholesale price. just to do new era caps wholesale and wholesale new era hats with them.

Get your own gravatar by visiting gravatar.com Toe Shoes
#8. July 1st, 2011, at 7:00 AM.

I have been examinating out some of your stories and i can state pretty nice stuff. I will surely bookmark your blog.

Get your own gravatar by visiting gravatar.com cherry
#9. July 26th, 2011, at 9:21 AM.

I think this a good blog post,thanks for sharing.

Get your own gravatar by visiting gravatar.com a2786716
#10. November 5th, 2011, at 2:07 AM.

I’ve said that least 2786716 times. The problem this like that is they are just too compilcated for the average bird, if you know what I mean

Get your own gravatar by visiting gravatar.com Shrek The Musical
#11. November 22nd, 2011, at 9:51 AM.

What’s Going down i am a new comers to this approach, Document located this approach I’ve discovered The software absolutely useful and has now aided others apart significant amounts. I’m hoping to make sure you contribute & help different customers want the country’s aided others. Great activity.

Get your own gravatar by visiting gravatar.com Soldes
#12. November 22nd, 2011, at 6:21 PM.

I am no longer certain the place you’re taking your information, but great theme. My spouse and i must commit some time finding out much more as well as figuring out additional. Thanks pertaining to magnificent info I was searching for this specific info pertaining to our quest.

Leave your comment...

If you want to leave your comment on this article, simply fill out the next form:




Anti-Spam Protection by WP-SpamFree

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> .

Famous Homemade Soups