Web Design in a Nutshell, 3rd Edition

Styling Form Controls with CSS

As for any HTML element, you can use Cascading Style Sheets to alter the font, colors, and size of form controls. The form element and the form control elements accept the id, class, and style attributes, so you can alter the font, size, color, and so on as you would for any other web page element. The label, fieldset, and legend elements intended for accessibility also make useful “hooks” for styling form content.

Some browsers, particularly old versions, do not support resizing fields or positioning forms with style sheets, so do so with caution and test thoroughly. Cascading Style Sheets are explained in Part III.

This simple example uses an inline style to create a black submit button with white text in the Impact font face (Figure 15-14):

    <input type="submit" value="SUBMIT"style="font-family: Impact, sans-serif;
    color: white; font-size: 14px; background: black" />.

Figure 15-14. A submit button altered with style sheets

In this example, a style sheet is used to highlight the required fields (last name and phone number) using class attributes in a minimal form (Figure 15-15):

<!-- Style information in head of document -->    <style type="text/css">input.required { background-color: darkred; color: white }
    </style>

    <!-- In the form... --> <p>First Name: <br /> <input type="text" name="first" size="30"></p> <p>Last Name: <br /> <input type="text" name="last" ...