Pretty Up Your Forms with CSS

Let's face it: form elements au naturel are NOT pretty. So what do we do with them? We add a border thickness here, a border color there, leaving the whole thing largely unchanged. And still ugly. Time to change that.

I'm going to use the Tableless CSS Forms code provided by DynamicDrive's CSS library contributors. This gives us the basic layout and essential elements without too much trouble:

We'll start with the basics: borders and background. In Web 2.0, simplicity is king. Beveled corners? Sooo Web 1.0. Sooo not pretty. We'll make the borders solid, with uniform color, and thin to keep the simplicity. And we'll specify a white background to avoid any cross-browser issues: .cssform input, .cssform textarea { border:#999 solid 1px; background:#FFF; } A nice, neutral gray tones down the harshness of the input areas' borders, and the solid-1px all the way around eliminates any doubts as to where the areas begin and end.

Next we want to make it a li'l roomier. How do you like cramming text into zero-padding textboxes? .cssform input { padding:3px 5px; } .cssform textarea { padding:5px; } Here's when you start getting into trouble with the disparities in browsers' box models, though as long as the width of the elements isn't an issue, you should be fine.

Now that we've covered the foundation, time to break out the makeup: images! Using a very small, very subtle gradient image, we can add a simple inner shadow to each input field. While this is "adding features", I feel it actually adds to the feeling of simplicity: .cssform input, .cssform textarea { border:#999 solid 1px; background:#FFF url(formgrad.png) repeat-x top left; } The gradient image is a 1px wide by 15px high PNG image with a gradient of hex colors #EEEEEE (top) to #FFFFFF (bottom). The slightest difference in color makes for a very nice effect.

We could very well stop here -- all the form elements are styled nicely, even the submit and reset buttons. But why stop there when you can make the buttons intuitive as well? .cssform .submit { background:#FFF url(submitgrad.png) repeat-x bottom left; } .cssform .reset { background:#FFF url(resetgrad.png) repeat-x bottom left; } Here we use another technique found at DynamicDrive. This simply adds two other colored gradient images to the background of the appropriate buttons. Of course, you must add the appropriate classes to the buttons for this to work. If you want to take full advantage of CSS standards and leave IE6 and below behind in the dust, you could just use the attribute selector: .cssform input[type="submit"] { background:#FFF url(submitgrad.png) repeat-x bottom left; } .cssform input[type="reset"] { background:#FFF url(resetgrad.png) repeat-x bottom left; }

And there you have it. With no more than three images (or one, if you prefer), some very simple CSS, and an eye for simplicity, we've made our form elements nice looking.

Additional links:
Download the example
DynamicDrive: CSS Tableless Forms
DynamicDrive: Stylish Submit Buttons