How to Style Forms in CSS

• By Jason Cranford Teague
• Mar 17, 2006

Forms are an easy way for you to get information back from visitors to your Web site. However, many Web developers think that it’s enough just to throw a few form fields into a table, and let them fall where they may in the Web page. They then expect the would-be informant to sift through this mess of roughly aligned text and 3-D beveled boxes to figure out what information is needed (see Figure 1).

Figure 1 Without the styles, the HTML provides structure but is difficult to read.

EXAMPLE: http://www.webbedenvironments.com/examples/StylingForms/indexNOSTYLES.html

However, with only a little extra effort, you can control the appearance of forms (text fields, select boxes, buttons, labels, and so on) by using CSS. You can also greatly enhance the forms’ functionality with interactive styles—all without ever having to break out the HTML tables.

As with other HTML elements, CSS can easily control most form elements to define their borders, colors, and fonts, allowing you to design forms that better integrate with the look and feel of your Web site. In addition to the typographic and color controls, CSS can be used to better position form labels around their respective form fields. CSS makes it easy to quickly change a form’s layout, whereas tables are pretty much a one-trick pony.

Parts of a Form Element

Left to their own devices, HTML forms are displayed according to the styles dictated by the visitor’s browser and operating system. Often, these styles (which can be radically different from browser to browser) are clunky and unattractive. However, there are several properties under your control:

• Text: Includes both the text for the form label and the text within the form field.
• Background: Either a solid color or a background image can add a lot of contrast to make form fields stand out without becoming overwhelming.
• Padding: Space around the content of an element (from content to border).
• Borders: Line around an element.
• Margins: Space around the element (from border to other elements).
• Position: Place labels and form fields where you want them without having to resort to tables.
• Dimensions: Width and height.
• Other: Set exactly how the cursor appears.

Beyond styling the static form fields when they first appear in the Web browser, styles can also be applied to form elements when the mouse is over them (hover), after the mouse has clicked the element (focus), or when the user is interacting with the form element (active). Figure 2 shows the form with styles applied.

Figure 2 The same form with styles applied. Not a lot of extra work, but a much better user experience.

EXAMPLE: http://www.webbedenvironments.com/examples/StylingForms/index.html