Applying CSS to Forms

By Trenton Moss
2004-06-24

The final form

Drum roll... Here it is:

Here's the CSS we used to make this, all in one place:

label
{
width: 4em;
float: left;
text-align: right;
margin: 0 1em 10px 0
clear: both
}

.input-box
{
float: left;
margin-bottom: 10px
color: #26a;
background: #feb;
border: #26a solid 1px
}

.submit-button
{
margin-left: 5em;
clear: both
color: #000;
background: #fb0;
border: 2px #9cf outset
}

fieldset
{
border: #26a solid 1px;
width: 20em
}

legend
{
background: #fb0;
border: #26a solid 1px;
padding: 1px 10px
}

Tutorial Pages:
» The Original Form
» Positioning the form with CSS
» Applying colours to the form
» Formatting the whole form
» The final form
» Take this further

Related Tutorials:
» Planning Your Stylesheet - The Definitive Guide
» CSS Shorthand Properties
» Print Stylesheet - The Definitive Guide
» Using CSS Selectors to Highlight Unedited Form Fields
» An Introduction to CSS
» Overlapping tabbed navigation in CSS