Home
		Web Design Blog
		Web Design Services
		Web Design Portfolio
		About Soh Tanaka
		Contact
		RSS
	
	
		
	
	


	
		
			
			
				Styling Your Search Form with CSS
				
				Blog » CSS/XHTML » Styling Your Search Form with CSS
				
				
					Styling Your Search Form with CSS
					November 11th, 2008 
					
					
					
					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.

View Demo
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://www.sohtanaka.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.

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


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*/
}


View Demo
Additional Resources

XHTML Strict – Jin Y
Style Your Website’s Search Field with JS/CSS – Alen
Grakalic
CSS-Based Forms: Modern Solutions – Smashing Magazine
Search: Visible and Simple – Jacob Neilson

Examples of Creative / Clean Search & Form Fields








Similar Posts:

Table of Contents Style Layout with CSS
Embedding & Styling XHTML YouTube Code
WordPress Plugins – What’s Under Your Hood?
Tick Tock – A CSS & JS Experiment
Achieving Double Background Effect with CSS





Did You Enjoy This Post? Subscribe via RSS ,by email, or by twitter to
get all upcoming tutorials and articles delivered straight to you.
Bookmark or Share this Post!


	
	
	
	
	
	


					
					
										Tags: Tutorial					 
					
						
							This entry was posted
														on Tuesday, November 11th, 2008 at 2:03 pm							and is
filed under CSS/XHTML.
							You can follow any responses to this entry through the RSS 2.0
feed.
							
														You can leave a response, or trackback from your own
site.
							
													
					
				
				
				


	

	42 Responses to “Styling Your Search Form with CSS”
	
	
	

	
		
			Nov 11th, 2008 @ 9:02 pm 
			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.
			

		

	
	
		
			Nov 11th, 2008 @ 9:27 pm 
			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…
			

		

	
	
		
			Nov 12th, 2008 @ 9:45 am 
			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.
			

		

	
	
		
			Nov 15th, 2008 @ 2:40 am 
			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…
			

		

	
	
		
			Nov 15th, 2008 @ 5:59 pm 
			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;}
…
			

		

	
	
		
			Nov 25th, 2008 @ 2:57 am 
			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.
			

		

	
	
		
			Nov 25th, 2008 @ 4:31 am 
			DrWeb
						
			
				Doesn’t look ok in Opera.
			

		

	
	
		
			Nov 25th, 2008 @ 5:01 am 
			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.
			

		

	
	
		
			Nov 25th, 2008 @ 8:36 am 
			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;
}
			

		

	
	
		
			Nov 25th, 2008 @ 9:35 am 
			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
			

		

	
	
		
			Nov 25th, 2008 @ 5:39 pm 
			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/
  
			

		

	
	
		
			Nov 26th, 2008 @ 12:03 pm 
			Soh
						
			
				Mike, I appreciate your suggestion! I will be looking into this,
it looks very promising  
			

		

	
	
		
			Dec 6th, 2008 @ 2:43 pm 
			Marko
						
			
				Nice article, thanks.
			

		

	
	
		
			Dec 7th, 2008 @ 3:07 am 
			giochi gratis
						
			
				Great post! Thanks for css tips&tricks
			

		

	
	
		
			Dec 7th, 2008 @ 2:35 pm 
			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.
			

		

	
	
		
			Dec 7th, 2008 @ 3:39 pm 
			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?).
			

		

	
	
		
			Dec 7th, 2008 @ 3:42 pm 
			Florent V.
						
			
				Well, looks like HTML code is stripped from comments, not escaped
for display. My second paragraph makes no sens now.  
			

		

	
	
		
			Dec 14th, 2008 @ 2:45 pm 
			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
			

		

	
	
		
			Dec 14th, 2008 @ 3:52 pm 
			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!
			

		

	
	
		
			Dec 17th, 2008 @ 11:09 pm 
			Invisible Yahoo
						
			
				Thanks! you helped me a lot. I used your code on my website and
it’s simply COOL
			

		

	
	
		
			Jan 9th, 2009 @ 3:20 pm 
			Jehzeel Laurente
						
			
				Oh my.. I love tweaking my search forms and this is exactly what
I’ve been looking for!  
			

		

	
	
		
			Jan 22nd, 2009 @ 8:40 am 
			igmar iris francia
						
			
				This doesn’t work on IE6
			

		

	
	
		
			Jan 22nd, 2009 @ 8:44 am 
			igmar iris francia
						
			
				woop sorry. does this mean it doesn’t have a hover effect
for IE6?
			

		

	
	
		
			Jan 27th, 2009 @ 5:48 pm 
			Soh
						
			
				Yea no IE6 hovers unless you use jQuery to force it in  
			

		

	
	
		
			Mar 27th, 2009 @ 2:52 pm 
			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.
			

		

	
	
		
			Apr 4th, 2009 @ 5:02 pm 
			delli
						
			
				any tricks how to style textarea like yours ?
			

		

	
	
		
			Apr 5th, 2009 @ 11:00 pm 
			Soh
						
			
				If you give me a couple weeks I can write one for you~  
			

		

	
	
		
			Apr 16th, 2009 @ 12:01 pm 
			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!
			

		

	
	
		
			Apr 30th, 2009 @ 2:17 am 
			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.
			

		

	
	
		
			May 21st, 2009 @ 8:20 pm 
			Декабрина
						
			
				Ну, прям шедеврально!))))
			

		

	
	
		
			May 27th, 2009 @ 2:44 am 
			TND webdesign
						
			
				Great solution..just came accross this little
“problem” and this solved it, thanks!
			

		

	
	
		
			Jul 7th, 2009 @ 6:25 am 
			Rafael R.P (Raff)
						
			
				
this code not work on ie 8, you know how i can fix?
			

		

	
	
		
			Jul 7th, 2009 @ 7:29 am 
			Soh
						
			
				Hey Rafael~ What seems to be the problem? I just checked in IE8~
			

		

	
	
		
			Jul 7th, 2009 @ 8:54 am 
			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
			

		

	
	
		
			Jul 18th, 2009 @ 2:30 pm 
			Thomas Eilander
						
			
				Great peace which helped me out! Thanks!
			

		

	
	
		
			Jul 22nd, 2009 @ 4:24 pm 
			Sun Location
						
			
				Thanks for this example of input search  
			

		

	
	
		
			Aug 8th, 2009 @ 2:12 am 
			top.rush-flash.pl
						
			
				Greate example thanks so much!  
You can see my website with this serach   Its look very nice.
			

		

	
	
		
			Aug 14th, 2009 @ 7:48 am 
			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 ?
			

		

	
	
		
			Aug 15th, 2009 @ 6:48 am 
			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)
			

		

	
	
		
			Oct 10th, 2009 @ 5:29 pm 
			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…
			

		

	
	
		
			Oct 26th, 2009 @ 2:26 am 
			NETZFANG
						
			
				Great Work.
add
::-moz-focus-inner { border: 0; }
to your css to remove the dotted focus of the search button in
Firefox.
			

		

	
	
		
			Nov 3rd, 2009 @ 2:19 am 
			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…  
			

		

	
	
	

 

	
	

	Speak Your Mind…
	
	
		
				
			Name *
			
		
		
			E-Mail *
			
			 
		
		
			Website
			
		
				
		
		
		
		
		
				

		
			Need to post HTML code?
			Use Postable for your convenience.
			
			Don't have an Avatar?
			Set up a Gravatar image now!
			
		
	


				
				
							
		
		
			
				
				Can't find what you're looking for? Don't be afraid to use the
search, or simply just ask!
				

	
	
	
	
				
			
			
			 Blog Categories
			
				
                      Latest Blog Posts
				
				
					
						CSS / XHTML / jQuery Tutorials
						Everything CSS , XHTML & jQuery  - Tutorials, tricks, tips
and more.
					
				
				
					
						Web Design Articles
						All of my deep thoughts, articles, procedures, experiences,
insight, and more.
					
				
				
					
						Design Tutorials
						Anything from design tips, Photoshop tutorials, and more.
					
				
				
					
						Search Engine Optimization Tips
						Search Engine Optimization tips, resources, techniques, and more
					
				
				
					
						Resources & Tools
						Fonts, Downloads, Tools, Plug-ins, Add-ons, and more!
					
				
				
					
						Personal Interests & News					
						All of my personal interests and site updates. Stay up to date
with whats happening.
					
				
				
			
			
			 Popular Posts
			
				

			
			Simple Page Peel Effect with jQuery & CSS
			This is a post with 187 Comments.
			
		
			
			
			Fancy Thumbnail Hover Effect w/ jQuery
			This is a post with 168 Comments.
			
		
			
			
			Simple Toggle with CSS & jQuery
			This is a post with 156 Comments.
			
		
			
			
			Simple Tabs w/ CSS & jQuery
			This is a post with 137 Comments.
			
		
			
			
			Smart Columns w/ CSS & jQuery
			This is a post with 106 Comments.
			
		
			
			
			Animated Navigation with CSS & jQuery
			This is a post with 91 Comments.
			
		
			
			
			Horizontal Subnav with CSS
			This is a post with 84 Comments.
			
		
			
			
			Mega Drop Down Menus w/ CSS & jQuery
			This is a post with 81 Comments.
			
		
			

			
			
			 Recent Comments
						
					


 
Greyscale Hover Effect w/ CSS & jQuery 
- andreas @ December 18, 2009
"I´d need some help with the start to make this on my site. On my
slider i..."


	


 
Liquid + Fixed Two Column Lists with CSS
- Albert @ December 18, 2009
"oh wow! padding-left! it’s so simple yet brilliant! this is one
of those..."


	


 
Animated Navigation with CSS & jQuery
- wajira @ December 17, 2009
"nice nav bar…. why isn’t working in blogger? somebody can
help me"


	


 
Simple Tabs w/ CSS & jQuery
- يوتيوب اسلامي @ December 17, 2009
"This is really very very good Site… Thanks"


	


 
Simple Toggle with CSS & jQuery
- Bockerl @ December 17, 2009
"Thank you … that is very nice and this has me very helped."


			
											
		
	



	




	
		
			
				About This Website
				
					
						 
						
						This website was developed by Soh Tanaka using PHP, XHTML, CSS
and JavaScript, handcoded in Adobe Dreamweaver. Powered by the
Almighty WordPress. 
					
				
			
			
				Featured / Recognition
				CSS Tricks - Short Interview
				We Love WP - Best of October
				Design M.ag - Display Switch
				Design M.ag - Image Rotator
                Noupe - Sexy Drop Down Menu
                Line 25 - Design Bombs Site of the Week
                Design Bombs in Top 16 Gallery List
				Vandelay Design - Impressive Blog Footers
			
			
				Resources & Favorites
                CSS Gallery
                Design M.ag
                CSS Tricks
				Orange County Photographer
                CSS Globe
				Spoon Graphics
                David Walsh
                Six Revisions
			
		
	
	
		Copyright © 2009 Soh Tanaka - Torrance Web Design - All Rights
Reserved. - Sitemap
	





st_go({blog:'5272582',v:'ext',post:'919'});
var load_cmc = function(){linktracker_init(5272582,919,2);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();



_uacct = "UA-913256-2";
urchinTracker();


Midi Mime Types SiteMap Contact Subscribe © 2014 JimmyLandStudios