Posts Tagged “rounded textbox”

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
%RELATEDPOSTS%

Tags:

Comments 3 Comments »

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

Did you ever want a fancy textbox like this one ?

Rounded-border textbox

I’m sorry, but HTML and CSS does not support this kind of appearance. You should use a trick in order to look like this by creating a background with a rounded textbox drawn. Then you should create a html textbox input with no border, smaller than the drawn textbox.
The CSS style for this textbox is the following:

.textbox {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        margin: 0px;
        padding: 2px;
        border: 0px none;
        width: 150px;
}


Andrei
http://www.webxpert.ro

Read also
%RELATEDPOSTS%

Tags:

Comments No Comments »