Textfield Design
Spice up your site with attractive text field designs.
Subscribe to the DesignLetter
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.
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
<input type=”text” name=”yourtextfield” class=”one” />
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.
All Design Tutorials (View All)
Comments (13)
Post a Comment