kadyellebee.com is a site for all-things-kristine.


my life is powered by Six Apart.

« hanging plates | Main | working hard »

pretty forms

Pretty Web Forms

Forms are always interesting and useful on Web pages. But making them look pretty can be very difficult, especially if you want to stay valid and well-formed. Using style sheets is the only way to go.

This article is a good overview for styling your forms. Ever since I started playing with this, it has been one of my favorite additions to my stylesheets. I usually do one stylesheet definition to cover everything, because that keeps it simple, and usually does a pretty good job. For example, here’s what is in my default stylesheet for my blog (the trading spaces inspired one)
input, select, textarea {
font-family:georgia, serif; font-size:11px;
color: #333333; background-color: #cccccc;
border: solid 1px White; padding: 2px;

I always try to include the font-family and size because its not alway inherited from the body or the containing elements. And the border usually makes it look finished, especially combined with some padding to keep the letters typed in the form from touching the edges.
[seen at about: Web Design]


TrackBack URL for this entry:

Listed below are links to weblogs that reference pretty forms:

» Style Web Forms Using CSS from Color Emporium
Via Kristine: SitePoint : Empowering Web Developers Since 1997 - Style Web Forms Using CSS... [Read More]


I have to admit I’ve long thought your forms are pretty! The font-face goes a long way. strawberry

Thanks for posting that link!

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)