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" />.
A submit button altered with style sheets

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 }

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

Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.