Textarea Field Tips and Tricks

Many things can be done with the form textarea field box.

The expected CSS designs like type size and borders can be styled, of course. But also things that might be less expected, like placing a background image into the textarea box, and extending the vertical height of the box as more content gets typed in.

You'll find these tips in the article:

1. Background color and font size, style, and color changes.

2. Border and padding changes.

3. Tap to automatically select textarea box content.

4. Place a background image into the textarea box.

5. Automatically adjust textarea box height to accomodate content.

6. Making it read-only.

You'll find live examples with tips implemented.

Background color and font size, style, and color changes

What you find here is familiar CSS styling. In general, how you can style a div tag is how you can style the textarea field.

Here is an example. The font size is 1.5em, italic, bold, and colored blue. The background-color is #ccc.

And here is the code for the example.

<textarea 
   style="
      width:100%; height:75px; 
      font-style:italic;
      font-weight:bold;
      font-size:1.5em; 
      color:blue;
      background-color:#ccc;
">
Example content
</textarea>

Border and Padding Changes

As with fonts and colors, the way you style a div tag border and padding is how you style the textarea field.

Here is an example. The border is 3 pixels wide, colored #ccc, and has 9px radius rounded corners. The padding is 1em.

And here is the code for the example.

<textarea 
   style="
      width:100%; height:75px; 
      border:3px solid #ccc; 
      border-radius:9px; 
      padding:1em; 
">
Example content
</textarea>

Tap to Automatically Select Textarea Box Content

To automatically select the content in a textarea field with a click, an onclick attribute is used. Specifically

onclick="javascript:select()"

Here is an example.

And here is the code for the example.

<textarea 
   onclick="javascript:select()"
   style="
      width:100%; height:75px; 
">
Example content
</textarea>

Place a Background Image Into The Textarea Box

To place a background image into a textarea field box, do it like you would place a background image into a div tag.

Here is an example.

And here is the code for the example.

<textarea 
   style="
      width:100%; height:75px; 
      background-image:url(https://www.willmaster.com/images/wmlogo_icon.gif); 
      background-repeat:no-repeat; 
      background-position:center; 
">
Example content
</textarea>

Automatically Adjust Textarea Box Height To Accomodate Content

Two things are required for adjusting the height of a textarea box: A JavaScript function and the onkeyup attribute. A min-height and a max-height CSS rules are also recommended.

Here is the JavaScript function.

<script type="text/javascript">
function AdjustContainerHeightToAccomodateContent(d) { d.style.height = d.scrollHeight + "px"; }
</script>

The JavaScript function can be put anywhere on the web page. Immediately above the closing </body> tag is fine.

And here is the onkeyup attribute for the textarea field.

onkeyup="AdjustContainerHeightToAccomodateContent(this)"

Here is an example. Type lines into the box to see the box height grow. (The box minimum height is 75px and maximum height is 400px.)

And here is the code for the example.

<textarea 
   onkeyup="AdjustContainerHeightToAccomodateContent(this)"
   style="
      width:100%; height:75px; 
      min-height:75px; 
      max-height:400px; 
">
Example content
</textarea>

Making it Read-Only

To make the textarea field box read-only, a readonly="yes" attribute is used. Specifically

Here is an example (the content can be selected and copied, but not changed).

And here is the code for the example.

<textarea 
   readonly="yes"
   style="
      width:100%; height:75px; 
">
Example content
</textarea>

You now know six tips and tricks that you can do with a form textarea field box.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager