Dreamweaver Article

You've picked a color scheme and decided upon particular fonts for your website. Now you need to create a form. But the way the form appears in a browser doesn't really fit with your overall design.

Then, you discover that you can use Cascading Style Sheets (CSS) to modify the appearance of your form and its elements (maybe you haven't discovered this yet—but if you read this article you will!). All seems well—until you find out that the browsers are in control over the appearance of your form elements, and that different browsers will display the form's CSS styling differently.

Not to worry—there are ways to add styling to forms and still have some (but not completely predictable) cross-browser control. This article touches on a few CSS styles that you can add to your forms. It also discusses variations in browser display and a neat "trick" to create dual style sheets for IE (and other browsers) and Netscape 4.x. to get around, in a limited fashion, the problem of unpredictable browser results.

Styling the form
When creating CSS rules, I prefer to use a HTML selector, which redefines HTML elements. Another option is to create a Class selector (which can be applied to different HTML elements) but that option is a little messier.

You can have multiple style declarations when you redefine an HTML element. If you want to style your FORM element, you can, for instance, change the font used in the form, the form's background color, and the border. Below is an example of CSS styles applied to a FORM element:

FORM {
font-family: Verdana, Arial, Helvetica, sans-serif;

color: #000080;
background: #B0C4DE;
border: 2px solid #4682B4;
padding: 5px;
width: 400px;
}

Without these styles, your form might look something like:

With the styles listed above, though, this same form will (in Internet Explorer and most other browsers) appear as:

Adding CSS styles to your form, then, allows you to better coordinate the look of your website by designating, for instance, the form's font, the font size, color, background color, and border. You can also control the width of the form.

Note: If the styles are applied to the FORM element itself, Netscape 4.x will display the border and width properties (see, for instance, this example screenshot). Netscape 4.x will not recognize border and width properties in CSS Styles if they are applied only to FORM elements (such as INPUT, TEXTAREA, and SELECT).

Declaring classes: Different styles for different forms
If you want different forms to have different styles, that's possible, too. In this situation, you would declare different classes of styles for the FORM element. The code below is an example of one particular class for the FORM element:

FORM.mail {
font-family: Verdana, Arial, Helvetica, sans-serif;

color: #000000;
background: #CDCDCD;
border: 3px double #FF0000;
padding: 5px;
width: 400px;
}

In order to apply the Class selector to a particular form, modify that form's HTML tag in a manner similar to this:

<form name="foo" method="post" action="foo.cgi" class="mail">

The form, to which this Class selector has been applied, will appear something like this:

Styling form elements for Netscape 4.x
In addition to adding styles to a FORM element, you can also style particular form objects used in the form, such as the INPUT (creates a text object by default), TEXTAREA (multiline text box), SELECT (drop-down list box), and OPTION (menu list) objects.

A typical rule (which would affect all of these form elements) could be, for instance:

INPUT, TEXTAREA, SELECT, OPTION {
	font-family: Georgia, "MS Serif", "New York", serif;
	padding: 2px;
	
	color: #000080;
	background-color: #E0FFFF;
	border: inset 1px #708090;
}

With these stylings, the form objects will display similarly to these:

Differences in browser display
Generally, the CSS styles presented above display as expected in Internet Explorer, Netscape 6.x, and other browsers. However, Netscape 4.x will display the form elements with CSS styles quite unpredictably (see, for example, this screenshot of how the above form objects display in Netscape 4.7).

Also, since Georgia and the other fonts are proportional fonts, the area that Netscape 4.x reserves for the form elements in question will be larger than the space that Internet Explorer renders. Netscape 4.x calculates the length of a form element by multiplying the number of characters (size="15") with the widest possible letter, probably the uppercase W.

Currently, about 10% of website visitors use Netscape 4.x, and that number is declining. You can learn more about the difficulties Netscape 4.x has in displaying CSS styles in The CSShark website (see the NN4 Issues section in particular).

The neat trick: Using two stylesheets
Currently, about 10% of website visitors are using Netscape 4.x, and that number is declining. Although the percentage is small, you may still want to prepare for these visitors so that your styled form elements will look good in both the more popular browsers and Netscape 4.x.

One solution is to have two different external style sheets—one for Internet Explorer, Netscape 6, and other browsers (hereafter I'll only refer to Internet Explorer when I'm referring to this group) and one specifically for Netscape 4.x. The stylesheet for Netscape 4.x would only have rules that Netscape 4.x displays properly, and the other would be designed for the Internet Explorer crowd.

The "trick," so to speak, is to have the code set to import the external styles designed for Internet Explorer and to link the styles designed for Netscape 4.x. Netscape 4.x does not recognize the @import code, so it uses only the linked style sheet. Internet Explorer merges both stylesheets, but by placing the @import sheet below the linked style, you will give it more importance, and this causes Internet Explorer to display the styles in the imported stylesheet.

Below is an example of how the code should appear in the HEAD tag to accomplish this feat:

<head>
<title>CSS: Styling forms and form elements</title> 
<link rel="stylesheet" href="NNStyle.css" type="text/css"> 
<style type="text/css"> 
<!-- 
@import url(Style.css); /*IE and NN6x styles*/ 
//--> 
</style> 
</head>

Remember, though, to make sure that any selectors and properties that are in the stylesheet for Netscape 4.x are also in the stylesheet for Internet Explorer. If you declare a selector or property in the linked stylesheet and omit this in the imported sheet, then Internet Explorer will take this selector or property with the corresponding value from the linked stylesheet.

The easiest way to have two stylesheets is to start out with the one sheet in which you declare the styles that you want for Internet Explorer and then copy this sheet, rename it, and change or delete the values which Netscape 4.x can't deal with.

Note: If Netscape 4.x cannot find the external CSS sile, the page will not be rendered properly.

Styling form elements for Netscape 4.x
If you decide to include a linked stylesheet for Netscape 4.x that roughly matches the stylesheet for the form elements (TEXTAREA, INPUT, SELECT, OPTION—see above), then you will want to declare in this corresponding linked stylesheet something like:

INPUT, TEXTAREA, SELECT, OPTION {
	font-family: "Andale Mono", "Courier New", 
		      Courier, monospace;
	}

This example for the linked stylesheet leaves out the background color, font color and border properties because Netscape 4.x does not display them properly. The font was also set to monospace to reduce the field length to an acceptable size. These styles are not really pretty or super-styled, but at lease they will be styled somewhat—and still be functional.

The sample page
View the sample page to see how your browser displays these styled form elements.

As you can see from this illustration, Netscape 4.x displays a small rim between the background color of the form and the border. This is expected in Netscape 4.x. The only way to get rid of it is to absolutely position the element and include the Netscape proprietary layer-background-color attribute.

A few words to the wise: Netscape 4.x and inheritance
Another problem you should keep in mind is that, due to inheritance difficulties, Netscape 4.x will lose all style information after a form element. One way to get around that problem is to clearly state all the styles in each declaration, and not trust to the inheritance of styles. This means that if you have declared the font-family and color in the BODY of the document, you should repeat this information in the declaration for the P, UL, OL, TD and so forth elements again.

On the Macromedia horizon: More cool styles to come
With CSS, then, you now know that you can create a cool-looking forms and form elements that fit with your website's color and font scheme (in most browsers, anyway). No doubt you're wondering about other possibilities, such as: Can other form elements, such as checkboxes and radio buttons, be styled? Can forms have a background image? Is it possible to have different colors for the options in a SELECT form element? The answer to these exciting questions is yes—to all of the above. Check the Macromedia DevNet soon to learn how to create these fun form styles.

In the meantime, if you're looking for a good primer for getting started with CSS styles, see An Overview of Cascading Style Sheets (TechNote 15230).