Recipe 5.2 Setting Styles for textarea Elements

Problem

You want to set styles for textarea elements in a web form to change the text's color, size, weight, and other properties of the element, as in Figure 5-4.

Figure 5-4. A textarea element with styles applied

Solution

Use a type selector to associate styles with textarea elements:

textarea {

 width: 300px;

 height: 100px;

 background-color: yellow;

 font-size: 1em;

 font-weight: bold;

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

 border: 1px solid black;

}

Discussion

Associating styles to textarea elements is fairly straightforward through the use of a type selector:

textarea {

 background-color: blue;

}

By adding the :focus pseudo-class, you can change the style of the active textarea field:

textarea:focus {

 background-color: green;

}

So, as a user fills out a form, the textarea field he is currently filling out will change color.

The browsers that currently support :focus are Netscape Navigator 6+ and Opera 7.

Recipe 5.2 Setting Styles for textarea Elements