Home > Programming > CSS >

How To Style An Input Text Box?

If you are tired of the boring look of an input text box, you can style it with css.

Here you se a normal text box

And here you se a styled text box

We simply made a background image in Photoshop, and then we saved it as a png file because of transparency. We then attached a class to the text box like so

.txtBox{
    background-image:url(/images/txtbox.png);
    background-repeat:no-repeat;
    background-color:transparent;
    border:0px;
    font-size:8pt;
    font-family:arial;
    height:26px;
    width:230px;
    padding-left:10px;
    padding-top:4px;
}

Now unfortunately some browsers like Opera, doesnt support this properly. But it works fine in the major browsers. You can do the same with a textarea. like so

Normal textarea

Styled textarea

Here is the style for the textarea

.txtBox{
    background-image:url(/images/textarea.png);
    background-repeat:no-repeat;
    background-color:transparent;
    border:0px;
    font-size:8pt;
    font-family:arial;
    height:62px;
    width:230px;
    padding-left:10px;
    padding-top:4px;
    overflow:hidden;
}

Now there will be problems if you type more words than can actually fit into the textarea. this you would have to fix with javascript. because background-attachment:fixed doesnt work on a textarea

Keywords : textarea | text | style

Click here for more CSS Examples