Custom Textfield Background

May 8, 2008 · Print This Article

The benefits to designing your own custom html text fields for use within your site can give you a completely personal look and feel that is totally your own. There are however, also some key disadvantages to this process. You can create any type of design, then use CSS to replace the actual text field background and have your own designed textfield. It’s easier then most would think. It’s the simple things that make or break your site.
Now lets look at the code.


<input type=”text” name=”This is the text name” class=”one” />

You want to give your text field a class so the CSS can format the field the way you want it to look. If you do not do this the custom image will not show.

Now for the CSS control information


.one {
width: 180px;
height: 20px;
background: url(../images/custom-textfielddesign/one.gif) no-repeat;
border: none;
padding: 2px 0 0 5px;

Simple as that. Now let’s talk about the advantages. With this CSS code you can give your site it own feel and personality. The site will still be SEO compliant. There are some disadvantages as well. Your design is only as good as your skill and you don’t want to make the text so hard to read that no visitor wants to return.

Good luck and I hope this helps with making your site exactly what you want.

Your choice for site templates and wordpress themes


Got something to say?

You must be logged in to post a comment.