Tutorials

Latest Word » Tutorials » Styling Your Search Form with CSS
Styling Up Your Search Form with CSS

Styling Your Search Form with CSS

Tags:

Today I would like to cover how to style your search field using background images in CSS. Previously I was using a different technique to style my forms and search fields, but this way seemed to be less of a head ache so I wanted to share it with those who are interested.

Original Approach

First let me go over my original approach which was using <input type="image" src="image-path"> as follows:

<form method="get" id="searchform" action="http://www.sohtanaka.com/">
	<fieldset>
	<input type="text" value="" name="s" id="s" />
	<input type="image" src="http://stblog.tanaka.netdna-cdn.com/wp-content/themes/st2008/images/btn_search2.gif" id="searchsubmit" value="Search" class="btn" />
	</fieldset>
</form>

This was all fine and dandy but there was one annoying issue. The image button would not align with the search input box and I would have to add a negative top margin to correct this issue. See below for an example.
CSS Bug - Search Field

Revised Approach

With this revised approach, I decided not to go with the type="image" and used the <button> tag, and added a background with CSS. This allowed both input text box and the button to naturally align. I also added a :focus pseudo class for the final touch (IE will not read this, so I added a conditional style specifically for IE to hide this effect). Below are some benefits of this method:

  • Aligns naturally
  • Only uses one image for buttons and input box
  • :focus pseudo class for browsers that support it
  • Added hover effect for button

CSS Bug - Search Field

HTML

<form method="get" id="searchform" action="http://www.sohtanaka.com/">
<fieldset class="search">
	<input type="text" class="box" />
	<button class="btn" title="Submit Search">Search</button>
</fieldset>
</form>

CSS

fieldset.search {
	border: none;
	width: 243px;
	margin: 0 auto;
	background: #222;
}
.search input, .search button {
	border: none;
	float: left;
}
.search input.box {
	color: #fff;
	font-size: 1.2em;
	width: 190px;
	height: 30px;
	padding: 8px 5px 0;
	background: #616161 url(search_bg.gif) no-repeat;
	margin-right: 5px;
}
.search input.box:focus {
	background: #616161 url(search_bg.gif) no-repeat left -38px;
	outline: none;
}
.search button.btn {
	width: 38px;
	height: 38px;
	cursor: pointer;
	text-indent: -9999px;
	background: #fbc900 url(search_bg.gif) no-repeat top right;
}
.search button.btn:hover {
	background: #fbc900 url(search_bg.gif) no-repeat bottom right;
}

Conditional Comments for IE

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

IE Style Sheet – ie.css
**EDIT** Ingo Chao commented that IE6+7 scrolls the background-image horizontally if the input gets more content, so my fix was to use a unique background image strictly for IE, and instead of aligning to the left, I reversed it and aligned it to the right to correct this bug.

.search input.box {
	background: url(search_bg_ie.gif) no-repeat right bottom; /* Unique Input Box background image specifically for IE, and the background position must be aligned to the right*/
}

Additional Resources

Examples of Creative / Clean Search & Form Fields

Creative and Clean Search Forms
Creative and Clean Search Forms
Creative and Clean Search Forms
Creative and Clean Search Forms
Creative and Clean Search Forms
Creative and Clean Search Forms
Creative and Clean Search Forms

Related Posts

Author Bio

My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!

You can learn more about me or Twitter  Follow me on twitter for more updates and resources!

Did You Enjoy This Post?

subscribe  Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.

+ Add Comment63 Peeps Have Spoken Their Minds...

  1. Zach S.

    Nice tutorial. There’s one problem with your button solution though. With your CSS styled button, there’s no text shown if the styles are taken off (since you left the value empty). So if the user had their styles and images disabled, the button would be blank and wouldn’t say anything. I haven’t been able to find a way to hide the value using css (unless I’m missing something). I’d definitely suggest using the graphical button and your 1st solution to adjust the layout issue.

  2. Soh

    Zach, good catch! It didn’t dawn on me until you mentioned it~

    I replaced the input with a <button> tag, and also added a text-indent of -9999px to shove it off of the page when styles are enabled. Seems to be working for me now~ Let me know what you think :-)

    Thanks for the input!

    **Edit** Although I did notice when all images are turned off the button and the text is not visible.. :-( Ill see if I can come up with a solution…

  3. Nelson

    Here is my two cents on this “what if images are turned off” scenario. If images are turned off, most likely the search is not the only thing they will be missing out on, there will be far more important factors of websites that the users will miss. So for those who are disabling styles, images, javascript, they are most likely used to things not working and not showing up as it should be. That is their loss, since 80% of websites depend on these elements anyways. This is similar comparison to designing for those with legacy browsers (IE4,5,etc). Their loss.

  4. Jonathan

    I like your site design. Nice post on input boxes. I found your site when I was searching Google for the :focus css code. Too bad it doesnt work on IE…

  5. mike

    the issue you were seeing comes from the UA weird handling of inputs in ‘normal’ layout. the submit button and the text input are ‘managed’, but the image input is not. so text and submit line up but image is off by a fair margin.

    easy fix for this is to force the issue by using divs:

    .left {float:left;}
    .stxt {padding:0px;}
    .simg {padding:0px;}
    .simg input {margin-left:4px;}
    .stxtinpt {height:20px;padding:0px;padding-left:4px;border:1px solid black;}

  6. Ingo Chao

    IE6+7 scrolls the background-image horizontally if the input gets more content.
    In IE6, we’ve found that background-attachment:fixed helps.
    IE7 needs background-attachment fixed; background-repeat:repeat; plus handmade values for background-position we did not fully understand.

  7. DrWeb

    Doesn’t look ok in Opera.

  8. Veera

    This is really helpful. I’ve been using wordpress themes where they using some creative text boxes, but never knew the technique behind that.

  9. hanz

    looks broken in ff3/win2000.
    just remove “fixed” from the background property:
    .search input.box {
    color: #fff;
    font-size: 1.2em;
    width: 190px;
    height: 30px;
    padding: 8px 5px 0;
    background: #616161 url(search_bg.gif) repeat left top;
    margin-right: 5px;
    }

  10. Soh

    The support of the online community is a beautiful thing :-) . As you can see I am not perfect and let some bugs pass by, you guys have reminded me to proof better and have forced me to come up with a solution quick! :-p Thank you all for the suggestions!

    Ingo:
    your solution using the fixed background attachment had a strange issue with IE 7 where it wanted to start the image from 0px 0px on top of my browser screen (not starting at the 0 point of the input box).

    To get around this issue, I decided to align right instead of aligning left, I also had to revise the image tailoring it specifically to IE7.

    this did the trick and fixed our bug, but Im wondering if there is a better solution for getting around this?

    Hanz:
    Sorry for that, I was trying to fix these bugs on the fly instead of correcting them locally then publishing :-p

  11. Mike

    Hey… I don’t know if anyone has pointed this out yet, but there is an excellent article on A List Apart about using the tags for forms and using small javascript and CSS to show the labels inside the form input fields only when deselected… That method seems to be better than the graphical one you are currently using as it is more compliant with screen reader software and degrades a little better potentialy?

    Check out the article and see what you think:

    http://www.alistapart.com/articles/makingcompactformsmoreaccessible/

    :)

  12. Soh

    Mike, I appreciate your suggestion! I will be looking into this, it looks very promising :-)

  13. Marko

    Nice article, thanks.

  14. giochi gratis

    Great post! Thanks for css tips&tricks

  15. Chillstarr

    Found another glitch. If you type something into the field, but it then loses focus, the Search graphic appears again underneath the entered text. Looks a bit messy. I suppose the only work around for this would be to check for entry by Javascript, thus making the solution less elegant.

  16. Florent V.

    Hello,

    This is nice, although I don’t really see the necessity of this technique. Vertical align problem? Using the vertical-align property (with a value in pixels, positive or negative, if needed) will solve it for the most part. It may allow for imprecision of 1px, so it’s not perfect, but it’s decent. Hover effect? You can do that with a bit of JS, by changing the value of the src attribute.

    So I’d stick with

    Note that using is not an issue. The issue here, accessibility-wise, is that you hide text to replace it with a background image. Whatever the technique used for this, whatever the content that is hidden and replaced by a background image (link content, heading content, button content…), it won’t ever be accessible. Just because it’s not using a standard way of saying «ok, this is a graphic, and it’s an equivalent for this text». The only existing standard ways to do this are IMG elements with alt attributes, and OBJECT elements with fallback content—relevant content, not «Install Flash Player or be damned.» ;) (HTML 5 plans for the OBJECT element to be able to display an image, like the IMG element does, but then the OBJECT element could have HTML-formated fallback content instead of a plain text alt attribute.)

    So: use BUTTON with an image in it (and alt text), or a INPUT of type “image”, and JavaScript for the hover effect. You may even use some inline JavaScript, it might make things easier (don’t listen to the separation zealot, you’re already tying your presentation and content together by using TEXT AS AN IMAGE where you could be using text, right?).

  17. Florent V.

    Well, looks like HTML code is stripped from comments, not escaped for display. My second paragraph makes no sens now. :(

  18. Joax

    Thanks.. works great as far as eye can see ^_^ except for (the windows version of) safari.. or i must have done sumtin wrong.. dunno.. used it on http://mentorion.nl

  19. Cameron

    Hi, nice article. I’ve read other articles regarding forms, using buttons as opposed to inputs, etc, and it seems there’s a problem with using the button tag. If I could only recall what it was.. anyone else have an idea? I think it had something to do with IE (doesn’t it always) – possibly only reading one button on a page, so you never know which button was actually pressed, if there’s more than one button on a page – I think that’s it. And possibly that it returns the value of the button not the name, I think. But there are issues with it, unfortunately, as it really is a great form element!

  20. Invisible Yahoo

    Thanks! you helped me a lot. I used your code on my website and it’s simply COOL

  21. Jehzeel Laurente

    Oh my.. I love tweaking my search forms and this is exactly what I’ve been looking for! :)

  22. igmar iris francia

    This doesn’t work on IE6

  23. igmar iris francia

    woop sorry. does this mean it doesn’t have a hover effect for IE6?

  24. Soh

    Yea no IE6 hovers unless you use jQuery to force it in :-)

  25. Keay

    I found another problem with this…If you type in the input field and use your mouse to click at the beginning of what you typed to change the text, you will have graphical problems with the background image in IE7. This is with the bottom right association.

  26. delli

    any tricks how to style textarea like yours ?

  27. Soh

    If you give me a couple weeks I can write one for you~ :-)

  28. corina

    Thanks for this post! the only thing I don’t understand is how you get the background image to re-size when you enlarge the browser view size.
    Thanks a lot!

  29. Attila

    Cool, thanks for sharing this. I fixed the Opera bug with:
    @media all (min-width: 0px){ selector{property: value;} }

    Works in Opera 9.64 /XP for me.

  30. Декабрина

    Ну, прям шедеврально!))))

  31. TND webdesign

    Great solution..just came accross this little “problem” and this solved it, thanks!

  32. Rafael R.P (Raff)

    this code not work on ie 8, you know how i can fix?

  33. Soh

    Hey Rafael~ What seems to be the problem? I just checked in IE8~

  34. Rafael R.P (Raff)

    @Soh, the code of the conditional for IE if lte I8 not works in IE8, i don’t know why x.x

  35. Thomas Eilander

    Great peace which helped me out! Thanks!

  36. Sun Location

    Thanks for this example of input search :)

  37. top.rush-flash.pl

    Greate example thanks so much! :)

    You can see my website with this serach :) Its look very nice.

  38. kamtizone

    Thanks for this post. A little helping me.
    Can you give me a suggestion if the image of searchform and button is just an image ?

  39. Anders

    This is totally awesome, I love it!
    However, I got a problem with it. Of course I’ve edited this to suit my needs, and it works like a charm in FireFox. Internet Explorer 8 is another case though – I don’t get the hover to work at all. Any tips or tricks?

    Please have a look at the website I’ve used it on;
    http://www.referee.cc

    Any ideas?! I’m all out, and afraid to tweak too much or else it won’t work at all :-) Thanks for the tutorial, Soh. Just need it to work in IE8 too. (Your example at here works in IE8, but not my own version)

  40. kami.

    thank you very much for this insight!
    i finally found a way to implement a form into my site. now i just have to get the search working…

  41. NETZFANG

    Great Work.

    add
    ::-moz-focus-inner { border: 0; }
    to your css to remove the dotted focus of the search button in Firefox.

  42. Mads

    Thanks for the tutorial.

    I’ve got it working perfectly except on my Mac with Safari and Chromium the search button appears beneath the input box. I’ve tried everything and it just doesn’t want to be placed inline… :(

  43. mache

    hi… i’m a little lost with this, i’m sorry. i need to know how should then i design the search_bg.gif image… is it just one bar and a button all together, or three of them in one image as you showed on the beginning of the post. … again sorry my ignorance.

  44. Nat

    Thanx Soh, though new on this but I’m learning a lot from you guys everyday keep it up dude!

  45. Kanuel

    Thank you! That was a nice tut ;)

  46. Natti

    Hi Soh, i was doing your first method and wondering why the image button would not align with the search input box, like you mentiond it..

    The question is why? there is no reason to doing this?

    ANYBODY know why the image button is not align with the search input box?

    THX in advance

  47. Hasim Coskun

    nice article :) thx

  48. mars

    awesome, awesome solution. very clever! thank you for posting it!

  49. gavin

    I have copied your code but my button displays a couple of pixels below the search box and over to the right? How can I fix that?

    Cheers

  50. Doug C.

    Great article, as always. I was wondering if I want to put some text in the search box (say, for example, “Looking for something?”), how would I implement that?

    Also, I live your comment form here. Any chance of getting the code? I would of course not make mine exactly the same, but it’s a great inspiration for something different.

  51. Carolyn

    Thanks, just what I was looking for, and the tip about the background scrolling in IE when long search terms are entered was well spotted.
    Doug C, to add text within the search box all you have to do is add value=”looking for something?” within the input line, eg after class=”box”, so you end up with

  52. John

    Hi Soh,

    Just want to congratulate you on the site and these tutorials, PURE GOLD..Really great work and I hope you continue, I really do. Some of the best I have ever found.. I have now used several of your tutorials to learn certain parts of coding better and have adapted what you have written to my own styling.
    Keep it up and a Big Thank You for your site and tips!

    Best Regards, John

  53. Gorilla Cube

    I love this post, great ideas to revamp my website! Thank you!

  54. Doug C.

    Carolyn, thanks for the info on the search box. I tried what you said, but nothing appeared there. I am speaking about the search box at the top of every one of my pages (it’s located in the dark gray nav bar).

    In my PHP files there was already a value there – value=”". I replaced that with the one you offered, but it didn’t show anything.

    Thanks anyway.

  55. Doug C.

    Sorry, forgot to parse the code. n my PHP files there was already a value there – value="<?php _e('Search','ColdStone') ?>". I replaced that with the one you offered, but it didn’t show anything.

  56. Doug C.

    Sorry, but it wouldn’t post the value in my comment. Must be a code thing. Anyway, there was already a value there and when I replaced it with your value and saved it didn’t do anything.

  57. Beatrix

    Hi Soh,

    Align to the right was useful, but the solution still has a bug in IE7.
    If I type a longer text in the input than the width of it and then I start to select the text to the left, the background is still scrolling to the right.
    Have you got any idea about this?

    Thanks, Beatrix

  58. Machteld

    Thanks very meuch for sharing this!!

    Cheers,
    Maggy

  59. Zhing Li

    Thanks a lot for your sharing! This is a really good tutorial! I like it!! =)

  60. Cari

    Search button wont work if you click it on IE7

  61. luzy

    i tried to.. but why was the background image for text box and button not working? T_T

  62. Amir H Fadaee

    Thanks very meuch for sharing this!!

  63. Victor Hugo Bueno

    Saving me with this example! =)

Speak Your Mind...

Post HTMLNeed to Post HTML Code? Use Postable to post code friendly html. *Wrap all html code in <pre></pre> tags.
Post HTMLNeed to Keep Updated with Comments? Subscribe to comments now.

CSS Gallery