Showing posts with label web tips. Show all posts

2009-05-15

Custom Search Bars with Image and CSS

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.

Image

101 CSS Resources And Tutorials To Your Site

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.