Should I size a textarea with CSS width / height or HTML cols / rows attributes?

Question

Every time I develop a new form that includes a textarea I have the following dilemma when I need to specify its dimensions:

Use CSS or use the textarea's attributes cols and rows?

What are the pros and cons of each method?

What are the semantics of using these attributes?

How is it usually done?

score 338 · Accepted Answer · edited Jan 06 '17 at 10:24

338

I recommend to use both. Rows and cols are required and useful if the client does not support CSS. But as a designer I overwrite them to get exactly the size I wish.

The recommended way to do it is via an external stylesheet e.g.

textarea {
  width: 300px;
  height: 150px;
}

<textarea> </textarea>

edited Jan 06 '17 at 10:24

tremendows

4,262
3
34
51

answered Oct 09 '10 at 08:24

kogakure

3,777
1
16
6

4

This is okay, but you have to realize that whatever arbitrary space you are setting the size with is going to waste and is really just for show. – Explosion Pills Oct 09 '10 at 08:27
5

@tandu: What do you mean by "is going to waste and is really just for show"? – BoltClock Oct 09 '10 at 08:48
4

rows/cols is based on the character size of the user. So if you have a css-defined width/height that cannot be divided by the pixles of a character in the textarea, there is going to be that much whitepsace left over vertically and horizontally. Probably no one will ever notice, but just sayin. – Explosion Pills Oct 09 '10 at 08:50
34

You could use "em" as measurement, instead of pixels. 1em is the width of the "M" in any font and size. But cols are only relevant if used with monospace fonts, which is in most designs not the case. To get a perfect fitting in height use a multiple of `line-height` for the height of your textarea. – kogakure Oct 09 '10 at 09:07
1

-1 The `rows` and `cols` attributes are not required for the `textarea` element to pass HTML5 validation, nor are they listed as required by W3C. – Leo Galleguillos Jan 06 '16 at 05:28
7

@LeoGalleguillos “Required and useful _if the client does not support CSS_”. Nobody said anything about validation. – Janus Bahs Jacquet Aug 13 '16 at 16:03
1

This solution is highly questionable. Using px units in CSS and also relying on rows (which will depend on the actual font-face used, which is not 100% controllable, since you don't know what browser/OS the user has) will almost certainly cause mismatches. I am extremely uncomfortable with too many upvotes on answers like this. I want to give it -167! – Octopus Jul 20 '17 at 16:53
It says on MDN that the default value of cols is 20 (-1) – Marvin Jun 02 '19 at 16:17

score 141 · Answer 2 · edited May 28 '20 at 10:55

141

textarea { height: auto; }

<textarea rows="10"></textarea>

This will trigger the browser to set the height of the textarea EXACTLY to the amount of rows plus the paddings around it. Setting the CSS height to an exact amount of pixels leaves arbitrary whitespaces.

edited May 28 '20 at 10:55

Flimm

136,138
45
251
267

answered Jul 11 '13 at 23:55

Jan Werkhoven

2,656
1
22
31

4

Unfortunatelly, "Height of textarea does not match the rows in Firefox" - it's "rows+1" http://stackoverflow.com/q/7695945/1266880 – apurkrt Mar 21 '15 at 21:09
6

Not sure if things have changed since '13 or whether there's something super non-obvious about my particular situation, but setting `height: auto;` in CSS doesn't seem to affect my textarea at all. – clozach Apr 01 '17 at 03:44
To counterbalance the other comments saying that this doesn't work, this answer solved my issue with using `rows` for a `textarea` within [bootstrap's `form-floating` CSS class](https://getbootstrap.com/docs/5.2/forms/floating-labels/#textareas). – somethingRandom Aug 17 '22 at 10:37

Explosion Pills · Answer 3 · 2014-08-13T13:51:22.117

12

According to the w3c, cols and rows are both required attributes for textareas. Rows and Cols are the number of characters that are going to fit in the textarea rather than pixels or some other potentially arbitrary value. Go with the rows/cols.

edited Aug 13 '14 at 13:51

answered Oct 09 '10 at 08:10

Explosion Pills

188,624
52
326
405

9

w3c schools states that you can set it through the rows and cols attribute but that setting height and width is better. There is no mention of rows and cols being a required attribute for textarea on w3c.org. http://www.w3schools.com/tags/tag_textarea.asp http://www.w3.org/wiki/HTML/Elements/textarea – Michael Stramel Aug 13 '14 at 12:53
20

@MichaelStramel my answer is four years old :) -- by the way it's *not* w3c schools. They are not affiliated. I'm not sure that HTML5 has a concept of *required* attributes anymore, but I could be wrong about that. I still don't see why setting width/height would be better than rows/cols though – Explosion Pills Aug 13 '14 at 13:51
3

I realized that after I commented but still felt it was relevant for anyone reading this post. Also, with responsive designs, the rows and cols can cause issues unless they are set through JavaScript. That IMO makes setting it through CSS a much better way. – Michael Stramel Aug 13 '14 at 14:06

Rohit Parte · Answer 4 · 2019-05-01T06:11:44.463

10

For text area we can use below css to fix size

    <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>

Tested in angularjs and angular7

edited May 01 '19 at 06:11

answered Apr 08 '19 at 04:30

Rohit Parte

3,365
26
26

10

What does this have to do with Angular? And how does this add compared to existing answers from 2010/ – Lazar Ljubenović Feb 13 '20 at 23:41

score 7 · Answer 5 · answered Oct 09 '10 at 08:27

The answer is "yes". That is, you should use both. Without rows and cols (and there are default values even if you don't use them explicitly) the textarea is unusably small if CSS is disabled or overriden by a user stylesheet. Always keep accessibility concerns in mind. That being said, if your stylesheet is allowed to control the appearance of the textarea, you will generally wind up with something that looks a whole lot better, fits into the overall page design well, and that can resize to keep up with user input (within the limits of good taste, of course).

score 7 · Answer 6 · edited Jan 04 '14 at 20:27

7

 <textarea style="width:300px; height:150px;" ></textarea>

edited Jan 04 '14 at 20:27

Rahul

1,181
1
11
20

answered Oct 09 '10 at 08:44

user470962

155
1

20

@user470962 Ad hominem. If you correct the syntax error to '' then the code is fine. There is no need to insult someone. As you can see the most popular answer is not unlike his. +1 – TAAPSogeking Oct 08 '13 at 02:37
1

@TAAPSogeking in fairness, this is the same answer, 4 years later. -1 – Rambatino Oct 29 '16 at 11:24

score 5 · Answer 7 · edited Sep 25 '19 at 13:20

5

HTML rows and cols are not responsive!

So I define the size in CSS. As a tip: if you define a small size for mobiles think about using textarea:focus {};

Add some extra space here, which will only unfold the moment a user wants to actually write something

edited Sep 25 '19 at 13:20

Tasos K.

7,979
7
39
63

answered Sep 25 '19 at 09:31

someone

53
1
4

using the :focus pseudo class is very clever! How come I didn't think of that. Combine with transition-duration! `````` – cmarangu Apr 10 '22 at 21:00

score 4 · Answer 8 · edited Feb 20 '11 at 11:02

4

The size of a textarea can be specified by the cols and rows attributes, or even better; through CSS' height and width properties. The cols attribute is supported in all major browsers. One main difference is that <TEXTAREA ...> is a container tag: it has a start tag ().

edited Feb 20 '11 at 11:02

knittl

246,190
53
318
364

answered Oct 09 '10 at 09:44

AsifQadri

2,388
1
20
30

score 3 · Answer 9 · answered Aug 16 '16 at 10:10

3

A major feature of textareas is that they are expandable. On a web page this can result in scroll bars appearing on the text area if the text length overfills the space you set (be that using rows, or be that using CSS. That can be a problem when a user decides to print, particularly with 'printing' to PDF - so set a comfortably large min-height for printed textareas with a conditional CSS rule:

@media print { 
textarea {
min-height: 900px;  
}
}

answered Aug 16 '16 at 10:10

Geoff Kendall

1,307
12
13

Anything can be made resizable by the CSS property "resize". See at w3schools. – pintergabor Nov 27 '21 at 16:02

score 3 · Answer 10 · answered Jul 24 '17 at 18:49

3

if you dont use every time use line-height:'..'; property its control the height of textarea and width property for width of textarea.

or you can make use of font-size by following css:

#sbr {
  font-size: 16px;
  line-height:1.4;
  width:100%;
}

answered Jul 24 '17 at 18:49

Nurealam Sabbir

365
3
4

score 3 · Answer 11 · answered Mar 06 '12 at 14:29

I usually don't specify height, but do specify width: ... and rows and cols.

Usually, in my cases, only width and rows are needed, for the textarea to look nice in relation to other elems. (And cols is a fallback if someone doesn't use CSS, as explained in the other answers.)

((Specifying both rows and height feels a little bit like duplicating data I think?))

Stokely · Answer 12 · 2021-01-12T02:31:35.823

YES!....always style textarea using CSS and avoid the attributes, unless you need to support some very old agent that does not support style sheets. Otherwise, you have full power to use CSS. Below is my default CSS formatting for textarea that looks beautiful in any website. Customize it as you like. Comments are included below so you can see why I chose those CSS properties and values:

textarea {
    display: inline-block;
    margin: 0;
    padding: .2em;
    width: auto;
    min-width: 30em;
    /* The max-width "100%" value fixes a weird issue where width is too wide by default and extends beyond 100% of the parent in some agents. */
    max-width: 100%;
    /* Height "auto" will allow the text area to expand vertically in size with a horizontal scrollbar if pre-existing content is added to the box before rendering. Remove this if you want a pre-set height. Use "em" to match the font size set in the website. */
    height: auto;
    /* Use "em" to define the height based on the text size set in your website and the text rows in the box, not a static pixel value. */
    min-height: 10em;
    /* Do not use "border" in textareas unless you want to remove the 3D box most browsers assign and flatten the box design. */
    /*border: 1px solid black;*/
    cursor: text;
    /* Some textareas have a light gray background by default anyway. */
    background-color: #eee;
    /* Overflow "auto" allows the box to start with no scrollbars but add them as content fills the box. */
    overflow: auto;
    /* Resize creates a tab in the lower right corner of textarea for most modern browsers and allows users to resize the box manually. Note: Resize isn't supported by most older agents and IE. */
    resize: both;
}

In my "reset" element style sheet I set these values as defaults for "textarea" by default, which give all your textareas a nice look and feel with scrolling when detected, a resizing tab (non-IE browsers), and fixes for dimensions, including a height that allows the box to size itself based on existing content you put in it for the user and a width that does not break out beyond its parent containers limitations.

score -9 · Answer 13 · edited Jun 20 '20 at 09:12

-9

CSS

input
{
    width: 300px;
    height: 40px;
}

HTML

<textarea rows="4" cols="50">HELLO</textarea>

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 14 '14 at 15:03

ASHU

94
7

you can do with the css very easily – ASHU Mar 14 '14 at 15:05
You can do in both way by css or you can feed by manually like this HELLO – ASHU Mar 17 '14 at 13:40
Why would you apply those properties to all elements? – blackmambo Dec 07 '19 at 21:11
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Donald Duck Jun 20 '20 at 23:33

Should I size a textarea with CSS width / height or HTML cols / rows attributes?

13 Answers13

CSS

HTML

Linked

Related