8 Adding style to search forms Friday, February 15, 2008 /

If you've added a search widget to your blog, you may be wondering how it could look a bit more stylish! After all, the default gray button isn't the most desirable button in the world.

Styling a search widget isn't difficult at all. You can customize the button using CSS or replace this with an image instead. Another customization option is to add some informative text inside the search box and remove the search button altogether.

In this post, we're going to look at some options and methods of customizing the search widget, so you can choose the method which works best for you and style your search box to match the overall design of your own customized blog.

In the previous installment of the Blogger Template Design Series, I explained an easy method of changing the layout of the header, enabling widget elements to be added. Search widgets are an excellent example of what could be included in a blog header, and in this post we will learn how search forms can be styled to suit your theme.

Search widgets are a type of form, constructed of a text box (the area where you type the search terms), a submit button, and some hidden elements which send information to the server about the search which is being performed.

If you're using a simple Blogger search widget, the code for your search widget will look something like this:

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text"/>

<input id="search-btn" value="Search" type="submit"/>

</form>

The elements which we can style are highlighted in red. The "search-box" element is the box which contains the search text, while the "search-btn" is the button keyed to submit the search query to the server.

By default, this simple search widget will appear like this in your template:

But using some simple techniques, we can make this look a whole lot prettier!

Using CSS to style the search widget

The easiest customizations can be achieved using only "inline CSS": this means that the search box and button can be styled within the code used for the search box.

For example, let's say we wanted the search box to have a pale blue background and a dark blue border. To achieve this, we simply add some style declarations to the "search-box" element, like this:

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>

<input id="search-btn" value="Search" type="submit"/>

</form>

By adding these style declarations, we can create a search form which looks like this:

We can add style to the search button in the same way. This time, the background will be dark blue with a red border, while the text is white and bold:

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>

<input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>

</form>

Note that in this example, I used "outset" rather than "solid" for the border property; this ensures the button looks raised rather than flat, and helps readers understand that it is a button which can be clicked.

Here is the resulting form:

You can experiment with different colors ans styles for your own search form to create a unique design.

Changing the visible text within the form

You could add some text within the search box as a guide for your readers (eg: Search this blog!).

This is achieved by adding a "value" to the search box, like this:

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/>

<input id="search-btn" value="Search" type="submit"/>

</form>

This will appear like this:

To change the text on the search button, we only need to change the value to our preferred term:

<input id="search-btn" value="Search" type="submit"/>

If you prefer the button to say "Go!", you could simply replace the value of "Search" with "Go!" instead:

<input id="search-btn" value="Go!" type="submit"/>

Using an image instead of a button

Using an image instead of a button isn't as complicated as you may think! For this, we simply need to change the input type from "Submit" to Image" and specify a URL for the image.

First of all, you will need to find the image you would like to use, and upload this to an external hosting account.

It is advisable to use a small image or icon for this (16x16px or slightly larger would be a perfect size for a search form). There are many free search icons available from Iconlet, or you could download an icon pack and choose a suitable image instead.

For this example, I'm going to use this icon from Iconlet:

To use this icon instead of the button for my search form, this is the code I will use:

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/>

<input id="search-btn" value="Search" type="image" src="http://bloggerbuster.com/images/search-small.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;"/>

</form>

Notice that I have changed the type of the input in this form from "submit" to "image", and have added the URL of my image afterwards. The style declarations align the image against the search box, adding some space to the left, and ensuring this doesn't float above the search box.

This is what the image will look like in the search form:

When using your own image instead of the submit button, be sure to reference the correct URL of your image.

You may also need to adjust the margins slightly for images of a different size to the one used in this example.

Coming soon...

In the next installment of the Blogger Template Design series, we will learn how to style links in a navigation bar using both CSS and icons.

If you have enjoyed this tutorial, please subscribe to the feed to receive updates of new posts.