Attention to detail is what separates
great web layouts from
average ones.
Incorporating custom elements, like bullet points and search boxes, can
elevate your website into a clean, cohesive design. However, creating a
custom search box with OnMouseOver-like effects can be difficult,
particularly when styling for multiple browsers.
This tutorial will teach you how to add custom form boxes (a search
bar) to your designs, and in browsers that format CSS correctly (read:
not IE anything, although there is an IE fix for other problems) we’re
going to have nice, fancy image replacements when you click on the
search box, using the :focus pseudo class. Note: This does NOT work
right in Safari, because it doesn’t know how to render transparent form
inputs. Shame.
We’re going to step away from trade shows for this post to let me,
the webmaster, write a short “how to:” for creating custom search bars
with image replacement using CSS. When I was first presented with the
idea of a custom search box, I searched the Google for hours trying to
come up with a solution, but in the end I couldn’t find one to achieve
what I wanted, hence this tutorial.
Although this example is tailored to a search bar, the same
principles can be applied to any <form>.What’s the point of
creating a beautiful web layout if you’re going to slap default form
boxes on it?
Overview
When it comes to adding search boxes to websites, the vast majority
of them are plain and boring. Replacing the search button is pretty
common, but the actual input box remains white and boxy. About the most
creative that the majority of websites get is adding a colored border
or changing the inside color.
I’ve seen examples of custom search bars, but most of them break down in IE7, like
Sacbee.com.
It looks nice and Mac-esque, but type more characters than can fit on
one screen and the image exits stage left, leaving you with a blank
search box. You could add an image that
repeats-x,
but that is pretty limited. Using some basic HTML and advanced CSS, we
can get the desired effect (almost in IE) without having to use
Javascript.
Example: (Note: the positioning will be off in IE, because Wordpress
is rudely changing a <div> tag into a <p> tag that closes
too early for reasons that baffle me)
Creating the Search Form
The first step is creating your search box form. If you are planning
on upgrading your current website’s search box, this step will be easy.
If you have to implement a search script yourself, it can be a little
harder, but not by much. There are plenty of free search scripts that
will index and search your website, and most hosting packages with some
kind of accessible control panel will come with one, which is what I
will be using in my example. However, note that the result page is
probably going to be very ugly, and requires some formatting to get it
to look like your web template. A bigger job for another day.
Below is a standard search form input, as dictated to me by the cgi search script when I set it up on my server.
<form action=”/cgi-sys/entropysearch.cgi” target=”searchwindow”>
<input name=”query” value=”search” type=”text”>
<input name=”user” value=”nimlok” type=”hidden”>
<input name=”basehref” value=”http://nimlok-louisiana.com” type=”hidden”>
<input name=”template” value=”default” type=”hidden”>
<input value=”Search” type=”submit”>
</form>
Which looks like this:
Pretty ugly, wouldn’t you say?
Assembly
Let’s start with the images I want to put there instead: two search
input boxes (one for normal and one for focused state) and a search
button.
These images are really easy to make in Photoshop; they’re just
rounded rectangle shapes with a pattern fill and a 2px stroke. The
search button itself uses the magnifying glass shape included in
Photoshop, so you can recreate simple images like these in about 15
minutes.
The Search Button
The first step is changing out the default images with our new ones.
Start with the search button, the code for which currently looks like
this:
<input value=”Search” type=”submit”>
change the type to “image” and add in the path to your new image, in
my case, src=”http://www.nimlok-louisiana.com/images/search-btn.gif”.
This is also a good time to add a “search_button” class to give it a 0
border and positioning.
<input value=”Search” class=”search_button” src=”images/search-btn.gif” type=”image”>
It’s not positioned quite correctly, but we’ll fix that later.
The Search Box
Next, we need to switch out that ugly white rectangle for something
that matches your website’s design. You’ll note the search script told
me to add several type=”hidden” fields to my search form. We’re going
to add another one to get the desired background effect, allowing us to
effectively stack the background underneath the search field.
Immediately after the INPUT line that controls the text input (the
one of type=”text”) add a new hidden field. This hidden field will not
show up in IE, although it will in Firefox. We’ll fix IE later; for
now, let’s focus on getting it to work in Firefox.
<input name=”searchbg” value=”” type=”hidden” class=”searchbg”>
Then, add the searchbg class into your style sheet. This will
determine which image shows up originally in Firefox (and other
browsers that I haven’t tested). It has no effect on IE.
.searchbg
{
background:url(http://www.nimlok-louisiana.com/images/search-box-3.gif) no-repeat;
width:101px;
height:23px;
display:block;
border: 0;
}
This still looks pretty rough. Add class=”search_field” to your
<input type=”text”> field (the actual search bar), and add the
following style code.
.search_field
{
float:left; /* this will make the images line up */
border:0;
padding:0;
width:92px; /* the width of the actual search box, must be shorter than your image so it fits inside it. */
height:20px; /* again, must be slightly less than the image size */
background-color:transparent; /* Makes the search field invisible so
you can see the image we want underneath. This doesn’t work in Safari,
so I may go back later and give them their own style sheet. For now,
I’m not bothered by this small inconvenience. */
}
:Focus Pseudo Class
Now it’s time for the fun part, making the images change in Firefox when you click on the search box.
This is achieved with an advanced CSS psuedo class called :focus.
The focus tag is how you get an element to change when you click on it.
You can also do :hover and :active (which have similar effects) to act
as an OnMouseOver-like tag.
.search_field:focus + .searchbg
{
background:url(http://www.nimlok-louisiana.com/images/search-box.gif) no-repeat;
}
The + .searchbg tells the code to change the .searchbg class whenever you focus on the .search_field.
Looks pretty good, doesn’t it? In Firefox, I mean.
IE Calamity
Now, if you’ve been following along in IE, you may be curious as to
why the image isn’t showing up for you. IE interprets hidden fields
differently–maybe more correctly, I mean, they ARE hidden–and so you’re
left in the dark.
There’s an easy solution to this, and it involves conditional comments.
We’re going to add a new class called .searchbgIE, and use it in a
div to wrap around the entire form. Putting the image as a div
background is important. If you put it on the form input background
(.search_field) it will move to the left and out of view in IE7 as you
type.
As a plus, we’re going to make it only appear in IE by using the
<!–[if IE]> <![endif]–> conditional comment. Since this
isn’t technically a “CSS hack,” it will still validate.
<!–[if IE]><div class=”searchbgIE”><![endif]–>
<form action=”/cgi-sys/entropysearch.cgi” target=”searchwindow”>
<input name=”query” value=”search” class=”search_field” type=”text”>
<input name=”searchbg” value=”” class=”searchbg” type=”hidden”>
<input name=”user” value=”nimlokl” type=”hidden”>
<input name=”basehref” value=”http://nimlok-louisiana.com” type=”hidden”>
<input name=”template” value=”default” type=”hidden”>
<input value=”Search” class=”search_button” src=”images/search-btn.gif” type=”image”>
</form>
<!–[if IE]></div><![endif]–>
The class .searchbgIE looks like this
.searchbgIE
{
background:url(http://www.nimlok-louisiana.com/images/search-box.gif) no-repeat;
width:101px;
height:23px;
display:block;
border:0;
}
It’s not positioned quite right, but I’ll fix all the positioning
later, when Wordpress isn’t screwing it up. The plus of this is that I
don’t have to worry about the positioning for the IE background messing
up the positioning for Firefox’s; they use different classes.
Tie off loose ends
Now, wrap the entire thing in a div using the class .search, so you
can position everything together. Throw a position:relative on it so
that we can absolutely position everything inside. (Note: again, this
doesn’t appear correctly in this tutorial, because of the way Wordpress
converts my code into nonsense. Check the
Nimlok Homepage for a working example in IE.)
.search
{
position:relative;
height:23px;
padding:0;
margin: 0px 0px 0px 0px; /* change this to position how you like */
}
Your HTML code should look like this:
<div class=”search”><!–[if IE]><div class=”searchbgIE”><![endif]–>
<form action=”/cgi-sys/entropysearch.cgi” target=”searchwindow”>
<input name=”query” value=”search” class=”search_field” type=”text”>
<input name=”searchbg” value=”” class=”searchbg” type=”hidden”>
<input name=”user” value=”nimlokl” type=”hidden”>
<input name=”basehref” value=”http://nimlok-louisiana.com” type=”hidden”>
<input name=”template” value=”default” type=”hidden”>
<input value=”Search” class=”search_button” src=”images/search-btn.gif” type=”image”>
</form>
<!–[if IE]></div><![endif]–> </div>
Completed Style Sheet, with positioning fixed. This is just how it looked best positioned on mine.
.search
{
margin: -8px 0px 0px 11px;
padding: 0;
position:relative;
height:23px;
}
.searchbgIE
{
background:url(http://www.nimlok-louisiana.com/images/search-box.gif) 3px 1px no-repeat;
width:101px;
height:23px;
display:block;
border: 0;
}
.searchbg
{
background:url(http://www.nimlok-louisiana.com/images/search-box-3.gif) 2px 1px no-repeat;
width:101px;
height:23px;
display:block;
border: 0px;
}
.search_button
{
position:absolute;
top:-1px;
left:100px;
border: 0px;
margin: 0px 0px 0px 2px;
}
.search_field
{
float:left;
border:0;
margin-left: 7px;
margin-top: 4px;
padding: 0;
width:92px;
height: 20px;
padding: 0px 0px 0px 0px;
font: 1.0em Arial;
background-color:transparent;
}
.search_field:focus + .searchbg
{
background:url(http://www.nimlok-louisiana.com/images/search-box.gif) 2px 0px no-repeat;
}
The End
This is it for the tutorial. By this point, you should have a
working custom search bar, with a delightful :focus effect in Firefox.
I’m by no way an advanced CSS user, so if anyone has any suggestions
for improvement, please leave me a comment, and I will update this
guide accordingly.
All
the cool kids are using CSS to separate content from appearance on
their sites. Here is 101 resources that will get your feet wet with
CSS, teach you some new tricks and techniques, clean your code, and hit
the ground running with pre-made layouts.
