Adding Style To Search Forms
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.
If you're using a simple Blogger search widget, the code for your search widget will look something like this:
By default, this simple search widget will appear like this in your template:
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:
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:
value="Search" type="submit"/>
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:
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.
Comment Form under post in blogger/blogspot