3 steps to design a custom text box using HTML and CSS

When you design your website, you may want something other than the plain textbox appearance that comes with the default:

In this short tutorial, I’ll show you how to make a textbox appear however you want using an image background and some easy CSS adjustments.

1. Create a background image

   First, you will need to create a background image to fill the textbox. This background image is just a rectangle of whatever size and appearance you want. For instance, I wanted a large textbox to use as a central, main search box on my website’s home page. Here is the image I created:

   

   As you can see, it’s just a simple rectangle with a bit of inner shadow and whatnot.

2. Write the form

   Anyone experienced in web development has done this a million and a half times, so use whatever form code you want incorporating the text box. As an example, here is a very simple search form:

   “`
   <form method="get" action="" class="search">
   My Search Form
   <input class="msb" maxlength="2048" name="q" size="25" title="Search" value="" lang="en" />
   <input value="Search" type="submit" />
   </form>;
   “`

3. Write the CSS

   Now we will use a little CSS to adjust the textbox to accept its new appearance. Note that the class attribute of the “q” input entity is set to “msb” (msb stands for mysearchbox).

   First, set the background-image property to the location and filename of your textbox background image that you created in step 1:

   “`
   .msb
   {
   background-image:url('../images/teSearchBox.png');
   }
   “`

   Then, set the size of the textbox by adding the height and width properties:

   “`
   .msb
   {
   background-image:url('../images/teSearchBox.png');
   height:48px;
   width:362px;
   }
   “`

   Note that these are just the actual dimensions of the background image.

   Finally, use the padding property to vertically align your text within the box. Whatever padding you add to adjust the placement of text inside the textbox, you must subtract from the height and width values. I used FireBug to play around with the padding and font size until I got something that looked right. I found that this combo of CSS properties worked well for me:

   “`
   .msb {
   background-image:url('../images/teSearchBox.png');
   border:0;
   font-family: Arial,Helvetica,sans-serif;
   font-size: 167%;
   color: #800000;
   height:38px;
   padding:10px 0px 0px 10px;
   vertical-align:middle;
   width:352px;
   }
   “`

That’s it! As you can see, it really couldn’t be easier to customize the appearance of an HTML textbox to give your website a unique design and feel.