CSS: The Missing Manual

Styling Forms

Web forms are the primary way visitors interact with a Web site. By supplying information on a form, you can join a mailing list, search a database of products, update your personal profile on MySpace, or order that Star Wars collector's plate you've had your eye on.

There's no reason your forms need to look like all the others on the Internet. With a little CSS, you can style form fields to share the same formatting as other site elements like fonts, background colors, and margins. There aren't any CSS properties specific to forms, but you can apply just about any property in this book to a form element.

The results, however, can be mixed (see Figure 10-7). Browser support for styling form elements varies greatly. Safari 2 and earlier limits styling to only a few form elements like text fields and the <fieldset> and <legend> tags. It won't let you change the look of buttons, checkboxes, radio buttons, or pull-down menus. Even Internet Explorer and Firefox may display the same form elements differently. The next section tells you which properties work best with which form tags, and also lists which browsers interpret them properly.

UP TO SPEED: Staying True to Form

Even without the varying browser support for CSS-styled forms (Section 10.3.1), there are good reasons to tread lightly when altering the look of universally recognized interface elements like Submit buttons and pull-down menus. Most Web surfers are already very familiar with how forms look and work. The ...