Creating an accessible yet sexy search box with CSS
Search boxes: integral parts of many websites but often neglected in terms of markup and style. When considering both accessibility and semantics, marking up a a search box can be a little awkward depending on the look you are trying to achieve.
In this post I will suggest some methods of marking up your search boxes, and show a neat way of styling it using css and a few images.
First things first
Lets think about what is needed. For a search box we need:
- A form element
- A text input
- A submit button
Also, ideally we need a label element for accessibility reasons so that users know what purpose the input element has (you can read more about labels and accessibility at 456 Berea St).
Therefore, here is the markup we could use for our form:
1 2 3 4 5 6 7 | <form action="page.html" method="post">
<div>
<label for="search">Search:</label>
<input id="search" name="search" type="text" />
<input alt="Search" src="img/search.gif" type="image" />
</div>
</form> |
This is pretty much the way most people would do it, but Im going to challenge this for the following reasons:
- We rarely want the label visible after styling
- Hiding the label with
display:nonecan cause accessibility issues (link) - Other methods of hiding the label can also cause issues (link)
- I want a method that does not require hiding the label…
Therefore I have come up with the following; this may have drawbacks which I’m hoping people will discuss in the article comments, any here goes:
1 2 3 4 5 6 | <form id="searchform" action="page.html" method="post">
<div>
<input id="search" name="search" type="text" />
<label for="search"><input title="Search" alt="Search" src="img/search3.gif" type="image" /></label>
</div>
</form> |
My reasoning behind this is, we still get the association between label and form element, the input has alt text of ‘Search’ which means this is what (in theory) the screen reader should pick up. Because this label doubles as the submit button we also don’t have to hide it. This method is also pretty easy to style. Lets get on to that now.
Styling the form
To style my form I will use 3 images: left curve, a gradient and the submit button. I could use a 4th image and tile it for the top and bottom borders, but for this Im just going to use css borders on the input box.
Now for the css:
#searchform div { /* This div will have the left image as a background */ background: url(search1.gif) no-repeat left top; padding: 0 10px; margin: 0; line-height: 1; } #searchform #search { /* Im going to apply a top and bottom border to this input so that it fits with my images and give it the gradient background */ border-top:2px solid #999; border-bottom:2px solid #999; border-left:0; border-right:0; background: #fff url(search2.gif) repeat-x top; padding: 3px 2px 2px 0; height: 15px; } #searchform input { /* Some reset styles to make my form elements play nice */ vertical-align: top; margin: 0 !important; line-height: 1; outline:0 !important; }
Internet explorer plays up a bit regarding input positioning but this can be overcome with a conditional comment to add a pixel of padding to the input box:
1 2 3 | <!--[if lte IE 7]>
<style type="text/css" media="screen">#searchform #search { position:relative; margin-top:-1px !important; }</style>
<![endif]--> |
Heres what it looks like:
Mission accomplished?
It looks nice, but how accessible and semantic do you think the code is? I personally think its better than simply hiding the label but I could be wrong. Discuss below!
Found this post useful? Why not buy me a coffee!
tsquez says:
Just wanted to say thanks for the tutorial. Been looking around for something like for a while now and this is bt far the best and easiest I have found. Once again thank you.
Comment made on October 11, 2008 at 6:21 am
biorezonans says:
thank u for your share ı recently learning css and everything useful for me…
Comment made on October 17, 2008 at 3:04 pm
birkof says:
Awsome tutorial …thanks a lot dude for sharing this
Comment made on November 8, 2008 at 3:27 pm
Anthony Brewitt says:
I was just searching to add a pretty search box to my blog, good work Mike.
Comment made on February 3, 2009 at 3:31 pm
Me says:
this has though one con. the button shows an image and thus does not depend on a css file
Comment made on March 14, 2009 at 2:45 am
JG says:
Nice tutorial, very easy to understand, big help!!!
Comment made on March 19, 2009 at 6:50 pm
Asif Shabbir says:
Yes very pretty. I can add it in over site. Thanks for posting. A nice box.
Comment made on May 7, 2009 at 12:13 pm
Muhammad Imran says:
This is great. Thanks for the trick. I will definetly add it to my site.
Comment made on May 8, 2009 at 6:28 am
Bapun says:
Thanks for the lovely tutorial. Btw is this possible to customize adsense search in this way?
Comment made on July 6, 2009 at 7:17 pm
Mike Jolley says:
@Bapun: Unsure – google are strict with that kind of thing.
Comment made on July 7, 2009 at 5:30 pm
xBids says:
Great article! I have been stuck searching online for how to make a css search box and now I have figured it out! Thanks again!
Comment made on July 14, 2009 at 4:47 am
Sedran says:
Thanks a lot!
I must use them 
Comment made on August 9, 2009 at 9:33 am
fernando says:
Hey, thanks but where can i find images search1.gif and search2.gif????
please can you send me…
Comment made on September 11, 2009 at 11:47 pm
Travel says:
This looks really good, thanks for the code.
Comment made on November 22, 2009 at 6:34 pm
John says:
I need the graphics to this form ?.
Comment made on November 27, 2009 at 7:17 pm
Mike Jolley says:
@John: Copy them from the source
Comment made on November 27, 2009 at 9:32 pm
Rahuman says:
It’s fantastic, I love it….
Comment made on December 23, 2009 at 5:02 am
value my car says:
Excellent tutorial! This is going to come is super handy for a project I’m working on. You da boss!
Comment made on February 15, 2010 at 8:31 am
Pazador says:
GRACIAAAAAAAAAAAAS
TE ADORO MI REY
Comment made on February 19, 2010 at 3:07 am
Tim Robertson says:
On safari and firefox in mac there is 5px whitespace between the box and the search “button”
Anyone worked out how to remove it? Thanks
Comment made on April 13, 2010 at 9:53 pm
Steve de Niese says:
you can fix this whitespace bug by setting the font-size on the label (demo_search) to 0 (font-size:0;)
I have only just tested this with Mozilla, and not properly but it seems to do the trick.
Comment made on July 12, 2010 at 7:27 am
Steve de Niese says:
The other thing to be aware of is that any whitespace in your code between the two lines may be interpreted by the browser, so you should ensure these two lines are back to back for firefox.
Comment made on July 12, 2010 at 7:48 am
Mike Jolley says:
@Steve de Niese: Theres only a white space bug with my example because wordpress likes to reformat my code. Should work fine in other situations.
Comment made on July 12, 2010 at 10:03 am
Ho Really says:
@Tim Robertson:
Also happens in Opera 10.6 Mac.
Comment made on July 14, 2010 at 6:57 am
dimple says:
nice tutorial really help a lot…..thanks for sharing
Comment made on September 28, 2010 at 1:28 pm