d’bug » Blog Archive » HOWTO: spruce up your search box with CSS and a background image

HOWTO: spruce up your search box with CSS and a background image

Posted by Brian
Posted on August 13th, 2007
View Comments

Very few designers appreciate the aesthetic of a text input field, and styling form fields cross-browser on any Web site can be a tedious and frustrating experience. The compromise typically involves applying a simple colored border and background to the fields. I think this is the right approach for Web sites and applications that are form field intensive, but the search box plays a special role in the design, and it deserves a little more attention.

Remember, you still want to maintain the general appearance of a text input, since getting wild with the look might contribute to a poor user experience. The following is a measured graphic representing the search box I will be using throughout this tutorial. It has familiar characteristics, but a more pleasant appeal. The lavender only helps to distinguish approximately where the actual input should be placed, and the final background will not contain this color.

A graphic representing a search box.

There are two possible approaches. The entire image can be the background, and a transparent GIF can be positioned over the area representing the submit button, or, the submit graphic can be sliced separately. For this instance, I prefer to slice it separately, since the markup will remain the same irregardless. If the search box and the submit button bleed together, a clickable transparent GIF might be the better option.

XHTML:

<div id="search_box">
    <form id="search_form" method="post" action="/">
        <input type="text" id="s" value="Search" class="swap_value" />
        <input type="image" src="images/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" />
    </form>
</div>

The div tag with the id attribute of “search_box” will act as the primary container and reference. The form tag is optional in regards to this example, and is coded only to illustrate a real-world scenario. The container will be the exact width and height of the background image. The height could in theory be eliminated from the container, and the submit graphic could help to define the dimensions. However, both the input text field and graphic have float values specified. Without a height (or a hack), the container would then need an element to clear those float values, or else the background will disappear.

For more information on floating and clearing elements, visit Floatutorial by Max Design.

CSS:

#search_box {
    width: 201px;
    height: 31px;
    background: url(images/bg_search_box.gif);
}
#search_box #s {
    float: left;
    padding: 0;
    margin: 6px 0 0 6px;
    border: 0;
    width: 159px;
    background: none;
}
#search_box #go {
    float: right;
    margin: 3px 4px 0 0;
}

The margins on the text input and the image input help to position the elements appropriately after applying the float properties. For the text input, all the default browser property values are overridden, which gives the illusion that the background is actually the text input. The width should be defined in pixels, and the size attribute should be left off the text input tag in the XHTML.

You might be tempted to give the text input a height, but you should avoid this practice. If a user increases the font size via the browser, you want the input to accommodate the new size. It may overflow the container and the background, but in most circumstances this is okay. The initial visual effect is worth the sacrifice for the very small number of users who will need (and know how) to resize the font.

11/04/07 Update:
There is a complication in Safari v.2.0. The text box still shows a border, even though the border width is zero. This problem does not appear in Webkit, or Safari v.3.0 for the PC. A common fix is much like the one in use on Ajaxian.com or Apple.com, which uses JavaScript to apply a class for Safari.

Click here to view the finished search box.

Tags: background image, css, search

A day late and a dollar short... comments are closed.

01 | August 15th, 2007 at 1:30 am

Hey thats really tidy, thanks for sharing

Comment by:

glen

02 | August 15th, 2007 at 3:17 am

Hi Glen,

I’m happy you liked it - thanks for the comment.

Brian

Comment by:

Brian

03 | August 15th, 2007 at 4:19 am

wow… yeah… that seemed alot easier then I thought it would be. Does that work in all browsers?

I see it works in FF2 and IE7. what browsers does this break in? Has anyone tested that?

Comment by:

Stefan Hayden

04 | August 15th, 2007 at 4:46 am

Tried it on Opera?

Comment by:

plop

05 | August 15th, 2007 at 5:11 am

For those Opera users I apologize — I forgot to “zero-out” the margin on the form tag. This is fixed and has been tested in version 9.22. Enjoy!

Comment by:

Brian

06 | August 15th, 2007 at 5:39 am

[...] howto spruce up your search box with css and a background image [...]

Comment by:

Tims Blog » Blog Archive » Patches and Add-ons

07 | August 15th, 2007 at 6:14 am

Exactly what ive been looking for, took me ages to find this page, thankyou, i like your search bar on your site, very nice.

Comment by:

Matthew

08 | August 15th, 2007 at 6:47 am

Hey Matthew,

Happy I could help out - I like the design of your site. Very clean.

Brian

Comment by:

Brian

09 | August 15th, 2007 at 12:23 pm

[...] Spruce Up Your Search Box with CSS and a Background Image “Very few designers appreciate the aesthetic of a text input field…” (tags: css webdesign search design javascript input Programming howto reference style tutorials tips web development form) [...]

Comment by:

links for 2007-08-15 : Christopher Schmitt

10 | August 15th, 2007 at 4:32 pm

[...] HOWTO: spruce up your search box with CSS and a background image Â» dâ€™bug (tags: background css webdesign search javascript design input programming html reference **) [...]

Comment by:

links for 2007-08-16 « Simply… A User

11 | August 15th, 2007 at 11:24 pm

[...] HOWTO: spruce up your search box with CSS and a background image Â» dâ€™bug (tags: css web search) [...]

Comment by:

links for 2007-08-16 « My Journal of Life

12 | August 16th, 2007 at 3:22 pm

[...] HOWTO: spruce up your search box with CSS and a background image Â» dâ€™bug (tags: css javascript input) [...]

Comment by:

links for 2007-08-16 « toonz

13 | August 16th, 2007 at 10:51 pm

[...] CSS ile zemin resimli arama alanlarÄ± yapmayÄ± anlatan gÃ¼zel bir makale. Link [...]

Comment by:

Fatih HayrioÄŸlu’nun not defteri » 17 AÄŸustos 2007 Web’den SeÃ§me Haberler

14 | August 17th, 2007 at 1:57 am

[...] http://blog.reindel.com/2007/08/13/howto-spruce-up-your-search-box-with-css-and-a-background-image [...]

Comment by:

Unwritten Thoughts Links for the Week «

15 | August 17th, 2007 at 8:15 am

[...] Este artigo que estamos indicando lhe ensinarÃ¡ a colocar uma imagem de fundo (background) em um campo input text do seu formulÃ¡rio utilizando CSS. Neste artigo o exemplo abordado Ã© um campo de busca com bordas arredondadas como a do exemplo acima. A mesma tÃ©cnica pode ser utilizada para personalizar todos os campos de um formulÃ¡rio. Veja o exemplo funcionando. Para mais detalhes visite: blog.reindel.com [...]

Comment by:

Colocar imagem de fundo em input text com CSS

16 | August 18th, 2007 at 4:44 pm

[...] HOWTO: spruce up your search box with CSS and a background image Â» dâ€™bug (tags: css webdesign search design javascript input forms programming button code control development form box background) [...]

Comment by:

links for 2007-08-19 | giancarlo.dimassa.net

17 | August 19th, 2007 at 5:19 am

[...] HOWTO: spruce up your search box with CSS and a background image Â» dâ€™bug mais uma css (tags: css) [...]

Comment by:

links for 2007-08-19

18 | August 19th, 2007 at 10:10 pm

[...] Referans: http://blog.reindel.com/…with-css-and-a-background-image Benzer YazÄ±lar Free CSS Toolbox: Css kodlayanlarÄ±n alet kutusu Acaba bu web sitesi neyle yapÄ±lmÄ±ÅŸ? Paste2: yeni nesil kod panosu AradÄ±ÄŸÄ±nÄ±z web sitesine ÅŸu anda ulaÅŸÄ±lamÄ±yor mu? jQuery dÃ¼nyasÄ±na adÄ±m atÄ±yoruz [...]

Comment by:

eburhan.com » Css ile zarif arama kutularÄ± hazÄ±rlamak

19 | August 20th, 2007 at 9:30 pm

Very nice example of creating a search box with CSS! I like it very much.

Comment by:

Scripts Directory

20 | August 23rd, 2007 at 9:03 am

this is great, i never thought of setting the background on the containing div (i’m working on some code where i set the background on the input field). i like your method instead. i’ll be bookmarking your site for more tips!

Comment by:

michelle

21 | August 23rd, 2007 at 10:35 am

Hey Michelle,

Great to hear! Be sure to subscribe to the feed for updates :)

Brian

Comment by:

Brian

22 | August 25th, 2007 at 4:06 pm

[...] Add a rounded corner search box with jQuery field replacement. Thanks Brian! http://blog.reindel.com/2007/08/13/howto-spruce-up-your-search-box-with-css-and-a-background-image/ [...]

Comment by:

wehuberconsultingllc.com » Blog Archive » Updated phpWebSite Bleuprint theme

23 | September 1st, 2007 at 4:08 am

Thanks a lot for this awesome tip, Brian :) I’m too broke to afford a custom domain name and subsequently a custom wordpress installation. So I do all my blogging in blogger. I applied your CSS hacks to my blogger-blog and they worked flawlessly. Take a look at it over here: http://atunu.blogspot.com . I had to make some changes to the actual XHTML to suite my site’s syntax.

Sorry for stealing the image you used for the example though :( I had to go through quite a trouble to dig them up from the source of this post..but human intuition always dictates. If you have any problem with me using the images, just leave me a comment or mail me and I will replace them with whatever I can cook up with Photoshop.

Comment by:

Naser

24 | September 1st, 2007 at 6:16 am

Great job Naser — it looks good! You are free to use those graphics as you see fit — so no worries. I designed it for the example, but it is available for anyone to use on their own site.

Comment by:

Brian

25 | October 3rd, 2007 at 1:05 pm

Super slice of CSS thank you!

Comment by:

Med

26 | October 5th, 2007 at 10:52 am

Does not work in Safari.

Comment by:

Ken

27 | October 12th, 2007 at 3:45 am

Hi Ken,

Sorry for the long delay in approving your comment. I wanted to check this out, but I have not had the time. Do you have a version of Safari that you were using, or, is anyone else having trouble getting this to work in Safari? Also, what was the issue that you were experiencing? Thanks.

Comment by:

Brian

28 | October 12th, 2007 at 11:35 pm

How do u make the “search” text disappear and the appear again on focuslost ?

Comment by:

Blogulate

29 | October 14th, 2007 at 2:03 am

In Safari a square input box is positioned in front of the image.

Comment by:

Kim

30 | October 14th, 2007 at 7:19 am

I do not have Safari on a Mac, but on the PC it looks okay. I will try and have a look on a Mac to find a fix.

@Blogulate

I use jQuery/JavaScript to accomplish this. The script is in the source of the example.

Comment by:

Brian

31 | October 17th, 2007 at 4:50 am

Brian, I’m truly behind the coding curve and a day searching before finding to come upon your site. Like a thirsty man finding water in the desert, I am grateful.

I used the listed code, and it doesn’t work. I’m short on time, so will try it again later.

But what I’d really like to know is can this code produce a result like the serach field on http://www.ejeliot.com/blog/59?

I use a dark background, and would like to keep the search cell dark as well. It is infinitely more aesthetic - and doesn’t look like someone dropped square white paint on the screen.

Comment by:

.ink.

32 | October 17th, 2007 at 7:22 am

@.ink.

It sure can produce those results - almost anything you can think up :)

I am currently researching a Safari fix though. However, in other browsers you shouldn’t have difficulty. Let me know what problems you are facing.

Comment by:

Brian

33 | October 17th, 2007 at 12:19 pm

Brian, thank you for post. I placed search box code below my sidebars .. the search box picked up the color. Good start.

But, testing it, I get an error code:
Method Not Allowed
Error 405

My assumption is, Mia Culpa, and clueless how and why. I see Naser is using Blogspot and had no problems.

Any recommendation?

Comment by:

.ink.

34 | October 17th, 2007 at 12:43 pm

I am getting an error in this function on your site:

function togglecomments (postid) {
varwhichpost:document.getElementById(postid);
ifwhichpostclassname:=”
whichpostclassname:”
}

else {
whichpostclassname:”
}

Also, I see for #search_box that you have no URL specified for the background:

#search_box {
width: 201px;
height: 31px;
background: url( );
}

For the solution you are looking for, I might just suggest styling the input instead.

HTML:

CSS:

#search_box {
border: 1px solid #fff;
background: #000;
}

Comment by:

Brian

35 | October 19th, 2007 at 5:40 am

Brian, Thank you for helping. I discovered the search function drops into Google’s lap, and want search results in the Blog.

Comment by:

.ink.

36 | October 21st, 2007 at 7:59 pm

Hey,
This code broke for me in FF2 when i added a name attribute to input tag like :

I am using php code to extract post values so my inputs have to be named. This code works for IE but not FF does any one have any ideas or workarounds. thanks
_D

Comment by:

Dmitry

37 | October 22nd, 2007 at 3:25 am

Hi Dmitry,

Looks like the code got stripped from the comment, but the name tag shouldn’t affect the visual display of the input. Some other element may be conflicting with it. Could you send me some code by email that I could look at?

Comment by:

Brian

38 | November 11th, 2007 at 8:19 pm

This thing checked out great for me until I plugged in the form fields for my search engine.

Unfortunately, now the form does not display properly in IE.

Instead, only in IE, it pushes the search field down one line for each form field. So, the search form appears four or five lines down the page.

Any way I can prevent this from happening?

Comment by:

Slob Jones

39 | November 12th, 2007 at 4:39 am

Hey Slob,

I’m not sure if this is it, but try putting this in your style sheet:

form {
margin: 0;
}

Comment by:

Brian

40 | November 29th, 2007 at 11:48 am

[...] http://blog.reindel.com/2007/08/13/howto-spruce-up-your-search-box-with-css-and-a-background-image/ [...]

Comment by:

Search Boxes « Web Technology @ CCBC

41 | December 11th, 2007 at 5:05 pm

Hi Brian,

Great custom search implementation.
I have it running on http://www.pixelshell.com however have noticed that the search box input is misaligned in Safari v3
In FF plays nice, for IEs I had to adjust padding with conditional comments but am surprised with Safari as normally it is the same as FF.
Clearly I have bodged something up since your example is aligned correctly in Safari.
Any thoughts what I have done?

Thanks :)

Comment by:

Myles

42 | December 14th, 2007 at 4:50 am

Hi Myles,

If this is Safari on the Mac, then you might have some difficulties getting it to work correctly without JavaScript. If it is Safari on the PC, then it should be okay. You could try removing the “fieldset” tag, or making sure that your form has a margin of zero. Either one of those might be causing conflicts.

Hope that helps!

Brian

Comment by:

Brian

43 | January 16th, 2008 at 7:14 am

Really nice!

I noticed the text entry and submit button alignment are off in Opera, but I’m hoping to find a solution for that. If you have any, please let me know. Otherwise, nice work!

Comment by:

Elizabeth

44 | January 17th, 2008 at 10:55 am

Hi Elizabeth,

I think this is because you need to set the following style in your stylesheet:

form {
margin: 0;
}

Comment by:

Brian

45 | February 29th, 2008 at 8:29 am

Hello:

This seems to work fine for me so far as stated in your article, with the exception that only in firefox when you put in text into the search field, and then reload the page, the original value is not reloaded, but the text you entered. Please help!

Comment by:

Rory Reiff

46 | March 1st, 2008 at 2:44 pm

Hi Rory,

If I’m not mistaken, this is actually a FF “feature” that no other browser implements. Typically, if a user refreshes the page, they actually want the values to be reset. If you really wanted this functionality back, then you would have to remove the JavaScript attached to the form field. I hope this helps.

Comment by:

Brian

47 | March 2nd, 2008 at 2:36 am

Thanks very nice - i am trying to set up using your tutorial at http://ilovephim.com/phim/

It need to have the search box that stand out and pretty!

thanks again,
STeve

Comment by:

stevehuynh

48 | March 3rd, 2008 at 9:59 am

Thanks Brian.

I added the following code into the javascript which forces FF to reload the “value”:

$(’#s’).val(’Search by google’);

My one remaining question before I implement this new search box on our site…it does not work on IE 5. I know this is an outdated browser, but it is being used to navigate to our site.

Here is the url: http://www.pitzer.edu/search/results/

Any ideas why its not working on IE5? Thanks for the help…this site has been wonderful!

Comment by:

Rory Reiff

49 | March 4th, 2008 at 12:34 am

It doesn’t work in IE 6.0

Comment by:

lchlebda

50 | March 4th, 2008 at 4:14 am

@Rory

I would drop your support for IE 5 and IE 5.5, and then let it degrade. I know as an educational institution it can be hard to let go of users who are on these browsers, but it is a necessary part of the development process. Honestly, I did not test it in anything other than A-grade browsers. Sorry I can’t be of more help in that area.

@lchlebda

I am able to view it in IE6, and currently do not have any issues. I am trying to fix an issue with this site in IE6, but it should not affect the tutorial.

Comment by:

Brian

51 | March 9th, 2008 at 1:31 pm

Could you remove the blur border with something like -

input { outline: none; }

Comment by:

Matt

52 | March 16th, 2008 at 7:27 am

[...] there appears to be a minor issue in Safari 2, this method of howto “spruce up your search box with CSS and a background image” worked well for me in a recent project. Tags: [...]

Comment by:

Text / Search Box: Using Background Images | David Bisset: Web Designer, Coder, Wordpress Guru

53 | March 31st, 2008 at 10:09 pm

Hi,

This example looks simple but very powerful. I liked it very much.

Thanks for sharing.

Ramesh Rasaiyan

Comment by:

Ramesh Rasaiyan

54 | April 28th, 2008 at 3:11 am

[...] Search dilemma solved I feel I owe my life to this article http://blog.reindel.com/2007/08/13/howto-spruce-up-your-search-box-with-css-and-a-background-image/ [...]

Comment by:

Search dilemma solved « Catherine Jenkins

55 | May 9th, 2008 at 11:40 pm

Thanks!

I followed your advice and now have a good-looking search box on my new Greek Care website.

That’s working great in IE7 and Firefox.

Comment by:

Jason King

56 | May 13th, 2008 at 11:42 pm

I know this is an old post but I just found it and it’s great! As the first comment mentioned, it’s really tidy.

Thanks for posting the information - it’s really useful!

Comment by:

Luc

57 | May 20th, 2008 at 7:27 am

Very slick search box! However, it doesn’t validate using a strict doc type (there are 5 errors on your example page). If possible could you fix your code so it validates ?

Comment by:

Darryl

58 | May 28th, 2008 at 6:22 pm

I liked this quick tutorial alot. It has been submitted to designbump.com here (incase you want to vote it up) so that others can see it. Thanks again!

Sarah

Comment by:

Sarah

59 | May 31st, 2008 at 12:36 pm

Great tutorial! I submitted it to designbump.com, you can vote it up here.

Keep up the good work!

- John

Comment by:

John Campbell

60 | June 10th, 2008 at 7:55 pm

This is really an awesome tip, thanks for sharing. I can’t seem to make it display correctly in IE7, I personally don’t even care, but the site listed as my URL is being built for a client and I’d like to try and fix it. Any ideas about issues with IE? Thanks again for sharing this, it really helped me out!

Comment by:

Shaun

61 | June 12th, 2008 at 11:40 pm

cool search bar, i will try it now
thanks…

Comment by:

video bulur

62 | June 18th, 2008 at 6:52 am

I love the look of your site.

Your site came up first for “search box field” in Google. Thanks for the tip. I’m trying to incorporate a search box field into a logo of mine.

Comment by:

Michael

63 | June 24th, 2008 at 12:37 am

Great work! But it is so big script :( Only for “search form” I need NOT whole Pack. Jquery-pack more then 21Kb. Trivial content-pages are lesser then this script!

Comment by:

bruce