Setting Styles for textarea Elements






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 shown in Figure.

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 Safari, Netscape Navigator 6+, Firefox, and Opera 7+.

See Also

The CSS 2.1 specification for dynamic pseudo-classes at http://www.w3.org/TR/CSS21/selector.html#x33; the CSS 2.1 specification for attribute selectors at http://www.w3.org/TR/CSS21/selector.html#attribute-selectors.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows