Textbox with background images and gradient borders

You can make textboxes have a snazzy look by utilizing background colors or background images.  Below are some examples:

Example 1: Textbox with a background image.

    


1. Create your image in Photoshop or another image manipulating program. Make sure to size the image to be large enough to fill the textbox. If you have different size text boxes, make the size fit the largest text box. Also, you only need to make the image 1 pixel wide as we will be repeating the image. Below is the code:


          .textbox_search
               {
                     background: transparent url('images/tbgradient.gif') repeat-x;
                     height: 15px;
                     border-style: solid; border-width: 1px;
                     border-color: #d3e4f0;
                     padding-left: 3px;
               }

Example 2: Textbox with a background image border.

     You can also use a background image as a border for a textbox. The only problem with this scenario is the image border must be the same size as the text box. One possible solution to have a specialty border that will fit any textbox is to create the specialty border for two sides only. For instance, create the special border to fit the left and top of the textbox and then just use a CSS border for the right and bottom of the text box. This way the textbox can be any size. You still need to make the specialty border big enough to accomade the largest textbox. Here is an example:

    


     .textbox
          {
               font-size: .8em;
               font-family: calibri, Arial, Sans-Serif;
               background: transparent url('images/textbox_bg.jpg') no-repeat;
               color: #747862;
               height:13px;
               border-top: 0px;
               border-left: 0px;
               border-bottom: solide 1px #c8cbb8;
               border-right: solid 1px #c8cbb8;
               padding:1px 8px;
               margin-top: 0px;
               margin-bottom:0px;
          }

Example 3: Textbox with image

      Lastly, another neat trick is to place an image in the background to help facilitate the textbox meaning. For instance, you can place a magnifying glass icon in a textbox to alert the user this is a textbox for performing a search. Below is an example:

     .textbox_image
          {
               background:#FFFFFF url(images/search.png) no-repeat 4px 4px;
               padding:4px 4px 4px 22px;
               border:1px solid #CCCCCC;
               width:230px;
               height:18px;
          }