I noticed a high degree of interest in my previous article about rounded-border textbox, so I decided that I must continue that post. Based on the comments that I received, I want to illustrate here another approach.

A better way than create the background for all the form is to set up the background just for input objects. In this demo we will create the background just for textbox. The image that we are using is the following:
Screenshot

All we need to do is to tell the textbox to use this image, through a CSS class, so first of all we have created a class called my_textbox:

.my_textbox {
 background-image: url(tbBg.jpg); /*Here we load the background image */
 background-repeat: no-repeat;
 background-attachment: fixed;
 height: 27px; /*we specify the the object dimensions like the image dimensions*/
 width: 174px;
 margin: 0px;
 padding: 5px 10px 0px 10px; /*without padding, the text will start from upper-left corner*/
 border: 0px none; /*we do not need any border*/
}

Then we must create a textbox input and set the class attribute to “my_textbox”:

<input name="user" class="my_textbox" type="textbox" maxlength="20">

The final result should look like this:
Screenshot
*We left the cells background white to see where the background comes.
Good luck!

Andrei
http://www.webxpert.ro

Read also

Tags:
3 Responses to “Rounded-border textbox II”
  1. Andrei DANEASA’s Blog » Blog Archive » Rounded-border textbox says:

    […] *You could probably also want to read the second version of this article here […]

  2. fnfzoneNo Gravatar says:

    Nice …………….. thanks

  3. alejandroNo Gravatar says:

    Great post! Thanks!

Leave a Reply