Textfield Design

Spice up your site with attractive text field designs.

Subscribe to our weekly newsletter and receive the latest in the web's best design trends, tutorials, information and more.

There are several advantages / benefits to designing your own custom html text fields for use within your site. There are however also several disadvantages. First however, let's take a look at a few examples and tutorials, and then we'll get into the specific details.

Simple Sleek

Bubble Sleek

Edge Sleek

Rough

Green Ora

Ripped Paper

Simple Line

Scotch Tape

Clouds

Okay ok, you get the idea. Basically you can come up with any type of design, use CSS to replace the actual text field background and have your own custom designed textfield. It's easy as cake. In fact, here's all there is to it..

HTML Code

CSS

.one {
width: 177px;
height: 18px;
background: url(../images/textfield-design/1.gif) no-repeat;
border: none;
padding: 2px 0 0 5px;
}

In the HTML, the part to notice is the class="one". It's referenced in the CSS as .one { }. Depending on the image you're using as the textfield background, you may have to adjust the padding. The first value in the padding from the top, and the last value (5px) is the padding from the left. Those values determines the beginning of the text. Remember though, when you set padding, you have to adjust the width and height accordingly.

Advantages

Design. You can spice up your site if you design a textfield background that matches the rest of the interface.

Disadvantages

Usability. Not everyone is the greatest designer. If a web designer decides to choose this method, it's the hope for the visitor's sake that they don't design something that is going to make it hard to see or use.
Excessive text can break it. You will see in the examples above that if you hit a single key excessively, it breaks the background. But there is a work around, simply put a charachter limit on the textfield. You could also set a background that repeats horizontally.

Design like a pro

All Design Tutorials (View All)

Comments (4)

Atakan Fall

09/03/08 9:44 am

Am I the only one who discovered te fact that if you type in styled text field a string longer then its size the bg image moves aside ??...

Nillo...

09/14/08 9:00 am

That because the image stop. To fix the problem just make the image longer, or type "repeat-x;" after the BG-image - in your stylesheet! ...

fyrye

12/08/08 3:40 am

Or for example if you want to conform to the W3C XML doctypes .sleekInput input{ width: 182px; height: 22px; background-image: url(/images/InputField.gif); background-repeat: no-repeat; background-position: bottom right; border: none; padding: 2px 5px 2px 5px; }

fyrye

12/08/08 3:47 am

Excessive text can break it. You will see in the examples above that if you hit a single key excessively, it breaks the background. But there is a work around, simply put a charachter limit on the textfield. You could also set a background that repeats horizontally. background-position: bottom right; Fixes the issue in IE6/7 which even the developer of this site missed. I missed that they missed it.. Another "work-around" is to apply the background image in a span or div surrounding the input, which allows it to appear that a button is inside the input field as well, like MSDN.com's Search bar