Tutorial: How to create a custom search box

Difficulty – Easy, makes use of an external style sheet (a css file). Even if you aren't familiar with using them, it isn't difficult at all.

Prerequisites:

• Basic understanding of HTML
• Basic understanding of using external CSS style sheets (not difficult)

In this tutorial, I will cover how to create a custom text box. Nothing is more dull than a default textbox, especially if the rest of your website is smooth or stylish. Here is an example:

Standard Input Box


Custom Input Box

In the second screen shot above, I have created a custom submit button along with a custom search box. And the button appears to be inside of the textbox, this is not the case however. I will explain the concept of creating your own custom textbox:

Create a div that you specify a background-image for, inside of that div, place a submit button and an input box. For both the input box and the submit button, remove all borders and backgrounds. Then, apply your own background-image for the submit button. The textbox never receives a background-image OR color. It is placed inside of the div that holds these two inputs, and has our search.png as the background>

For this tutorial, we are only going to customize the text box. After this tutorial, you will be able to customize a button without trouble. Now, let’s get to work. Download the image below:

Advertisement:


Download Link

Here is an example of what a standard built-in search box (or text input box...) will look like:

HTML Code:

<form action="submit.php">
 <input type="text" id="textBox">
</form> 

Preview:

To create a custom search box, we need to remove the text box's border, and background color. This will give us an invisible text box. We will then place the text box within a divider that holds our input box background image.

To do this, we will use an external style sheet. Create a document called "MyStyle.css," and add the following code between your HEAD tags:

HTML Code:

<link rel="stylesheet" type="text/css" href="MyStyle.css">

From now on, when I refer to CSS code, it will apply to the MyStyle.css file.

HTML Code:

<form action=”submit.php”>
 <div id="searchField">
  <input type="text" id="textBox">
 </div>
</form>

Advertisement:


CSS Code:

/* This will apply our background to the divider
that contains our search box */ 
#searchField {
 background-image:url('CustomSearchBox/search.png'); 
 width:205px;
 height:30px;
}

/* This will remove the border and white background
of our text box, giving us an invisible search box - It also sets the font color to white */ 

#textBox {
 border:0px;
 background:none;
 color:white;
}

Preview:

Next we need to position our text box within the divider so that our text aligns properly:

CSS Code:

/* This will apply our background to the divider
that contains our search box */ 
#searchField {
 background-image:url('CustomSearchBox/search.png'); 
 width:205px;
 height:30px;
}

/* This will remove the border and white background
of our text box, giving us an invisible search box - It also sets the font color to white */ 

#textBox {
 border:0px;
 background:none;
 color:white;
 /* This will position our text within the search box */
 margin-left:5px;
 margin-top:6px;
 width:195px;
}

Preview:

Advertisement:

To add a custom button, you need to create a button (<input type="submit">). You need to give it an ID number, and then give it some CSS properties:

First, remove its border and background. Then you need to specify a background-image, and set the width and height of your button to that of the background image. To position the button inside (on the left side) of your textbox like in my second initial example, you need to reduce the text box width, set it to float:right, and place the button inside of the "searchField" divider. Then you must give the button the float:left property.