How to Style Comment and Message Inputs
Tags: css, html, webdesign, inputs
Published: 2018-07-18 08:13:56

---
title: How to Style Comment and Message Inputs
published: true
description: Textarea tag busted!
tags: CSS, HTML, web design, inputs.
---

The textarea is HTML tag mostly used for messages and comments. It is very similar to inputs, but because it provides an option to have more than one line of text, it is not presented as input &#91;type="textarea"]. 

In this text, all options of this tag will be present along with the often asked questions about it, and that will be all I believe exist related to textarea.

Keep in mind that this text is second in line, after [input &#91;type="text"&#93;](https://kolosek.com/input-text/).

## About Textarea

The default textarea tag is presented with border and graphic in the right bottom angle. It is a good practice to add a placeholder, just like in every input field. 

     <textarea>
     </textarea>

![textarea tag_1](https://kolosek.com/content/images/2018/06/Screen-Shot-on-Jun-1st-at-11_50-AM.png)

A default size of the textarea is defined with `font-size` of the text inside of it. So, if it isn't defined different, the height of the textarea is defined with 2 lines of text and width is defined with 20 text characters.

## Attributes
Some of the most useful options for the textarea element can be defined with its attributes. There is a list of the most common:
* **autofocus**,
* **readonly**,
* **required**,
* **disabled**,

---

*All of these 4 attributes are pretty self-explained: `autofocus` makes textarea focused when the page loads, `readonly`, `required` and `disabled` attributes add just that state to the textarea.*

---

* **placeholder**,
* **maxlength**,
* **cols**,
* **rows**,
* **wrap**.

*These 5 attributes are used for styling and defining textarea more closely.* 

With the `placeholder` attribute, you can add a placeholder, as in all input fields. The `maxlenght` specifies the maximum number of characters allowed. `cols` defines the "width" of a textarea by a number of the average character width (default value is 20) and `rows` defines the height of a textarea by the number of the text lines (default value is 2).

The `wrap` attribute defines newline presentation on the submitted text. Values for these attributes are **soft** (default), **off** and **hard**.

By choosing to turn the wrap **off**, text in the textarea will not break until you press return/enter.

By choosing **hard**, the submitted text contains newlines and by choosing **soft** it isn't. For a better understanding of this attribute checkout [html.com post](https://html.com/attributes/textarea-wrap/).

     <textarea autofocus required placeholder="type your message" maxlength="180"  cols="50" rows="6" wrap="hard">
     </textarea>

![textarea tag_2](https://kolosek.com/content/images/2018/06/Screen-Shot-on-Jun-1st-at-11_49-AM.png)

For further styling you should use CSS, just keep in mind that option `white-space:nowrap;` doesn't work.

## Resize Problem
There are a few problems with resizing related to textareas. To define height and width of the textarea you can use cols and rows attributes, or CSS standard styling (better).

The next problem includes removing the resize handle. So, you create a super nice design and everyone has an option to stretch textarea over it. Nah ah! This one is super easy to fix:

     textarea{
         resize:none;
     }

Also, a small but annoying thing about this tag we talk about is the default scrollbar on textarea in all versions of IE. Luckily, a solution is just a few lines.

     textarea{
         overflow:auto;
     }

The most often resize related problem though is autoresize. Unfortunately, there is still no option for textarea autoresize but here it is [one of the hacks](https://www.impressivewebs.com/textarea-auto-resize/) you can use.

## Reset Design
Specific styling options for textarea are the same as ones for inputs. So, you can style border, background, text, placeholder text, states. I found a few examples of a non-standard textarea and it was difficult, so that proves that textarea is one ok-to-be-standard element.

![textarea](https://cdn.dribbble.com/users/270336/screenshots/1707425/dribbble_1x.png)

## Closing Line

The textarea tag is commonly used and its options are really simple. After you read this text I'm sure you will master it!

---

If you need a bit of CSS and HTML for your next project, why not leave it to the professionals? Let [Kolosek team help you](https://kolosek.com/startproject/)!

This post is originally published at [Kolosek Blog](https://kolosek.com/textarea-tag-busted/?utm_source=dvt).