Adding styles to forms

Form fields can be styled, enabling you to get away from the rather clunky default look
offered by most browsers. Although the default appearance isn’t very attractive, it does
make obvious which elements are fields and which are buttons. Therefore, if you choose
to style forms in CSS, ensure that the elements are still easy to make out.
A simple, elegant style to apply to text input fields and text areas is as follows:
.formField {
border: 1px solid #333333;
background-color: #dddddd;
padding: 2px;
}
In HTML, you need to add the usual class attribute to apply this rule to the relevant element(
s):
<input class="formField" tabindex="11" type="text" id="realname"
å name="realname" size="30" />
This replaces the default 3D border with a solid, dark gray border, and it also sets the
background color as a light gray, thereby drawing attention to the form input fields. Note
that browsers that support :hover and :focus on more than just anchors can have these
states styled with different backgrounds, thereby providing further prompts. For example,
upon focusing a form field, you might change its background color, making it more obvious
that it’s the field in focus.
Because the border in the previous code is defined using a class, it can be applied to multiple
elements. The reason we don’t use a tag selector and apply this style to all input fields
is that radio buttons and check boxes look terrible with rectangular borders around them.
However, applying this style to the select element can work well.
Note that the background color in this example is designed to contrast slightly with the
page’s background color, but still provide plenty of contrast with any text typed into the
form fields; as always, pick your colors carefully when working with form styles.
The default Submit button style can be amended in a similar fashion, and padding can also
be applied to it. This is usually a good idea because it enables the button to stand out and
draws attention to the text within. Should you desire a more styled Submit button, you can instead use an image:
<input type ="image" src="submit.gif" height="20" width="100"
å alt="Submit form" />
Along with the fields and controls, it’s also possible to style the elements added in the previous
section “The label, fieldset, and legend elements.” The fieldset rule applies a
1-pixel dashed line around the elements grouped by the fieldset element, along with
adding some padding and a bottom margin. The legend rule amends the legend element’s
font and the padding around it, and sets the text to uppercase; it also adds a background
color so that the dotted line of the fieldset won’t be shown behind the legend text in
Internet Explorer. Note that not all browsers treat margins on legend elements in the same
way, so if you add a margin value, be sure to thoroughly test your page. The screenshot
that follows also includes the styles included in the default CSS document from the
basic-boilerplates folder.
fieldset {
border: 1px dashed #555555;
padding: 10px;
margin-bottom: 10px;
}
legend {
padding: 0 10px;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background: #ffffff;
text-transform: uppercase;
}

A final style point worth bearing in mind is that you can define styles for the form itself.
This can be useful for positioning purposes (e.g., controlling the form’s width and its bottom
margin); the width setting can prove handy, since the fieldset border stretches to
the entire window width, which looks very odd if the form labels and controls take up only
a small area of the browser window. Reducing the form’s width to specifically defined
dimensions enables you to get around this. Alternatively, you can set a fixed width on the
fieldset itself (or float it, enabling you to display fieldsets side by side.
You can also color the form’s (or fieldset’s) background in addition to or instead of the
input fields, thereby making the entire form prominent. This is a device I’ve used on various
versions of the Snub Communications website’s contacts page, as shown in the following
screenshot.
Regardless of the form styles you end up using, be sure to rigorously test across browsers,
because the display of form elements is not consistent. Some variations are relatively
minor—you’ll find that defining values for font sizes, padding, and borders for input fields
doesn’t always result in fields of the same height, and that text fields and Submit buttons
don’t always align. A more dramatic difference is seen in versions of Safari prior to 3.0,
which ignore many CSS properties for forms, instead using the Mac OS X “Aqua” look and
feel—see the following screenshot for how the Snub Communications form looks in that
browser. Form functionality is not affected by this, but layouts can be.