Styling multiple line text input controls (`textarea` elements) with CSS

This demo page is related to the article Styling form controls with CSS, revisited. For more info on the purpose of this page, please read the article.

Each multiple line text input control consists of this HTML:

<textarea cols="20" rows="3"></textarea>

The following CSS rules are used to style the textarea elements:

#el01 {width:100%} /* Width */
#el02 { /* Text and background colour, blue on light gray */
color:#00f;
background-color:#ddd;
}
#el03 {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */
#el04 {border-width:6px} /* Border width */
#el05 {border:2px dotted #00f} /* Border width, style and colour */
#el06 {border:none} /* No border */
#el07 {font-family:"Courier New",Courier} /* Different font */
#el08 {font-size:2em} /* Bigger text */
#el09 {font-size:0.5em} /* Smaller text */
#el10 {font-weight:bold} /* Bold text */
#el11 {padding:1em} /* Increase padding */
#el12 {text-align:right} /* Change text alignment */

The width and height of all textarea elements is specified in the markup by the required cols and rows attributes. Each textarea element is 20 columns wide and 3 rows tall, with the exception of the first one, for which CSS overrides the width.

In your current browser, with your current settings, the textarea elements look like this: