textarea's rows, and cols attribute in CSS

Question

I'd like to set the textarea's rows and cols attributes via CSS.

How would I do this in CSS?

A when to use which question: http://stackoverflow.com/questions/3896537/is-it-better-to-size-a-textarea-with-css-width-height-or-html-cols-rows-attr — Ciro Santilli OurBigBook.com, Jul 13 '14 at 15:34
Also see: [textarea: styling with css](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#styling_with_css), [styling web forms](https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms), and [textarea spec](https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-cols) — djvg, May 09 '23 at 12:37
I guess it's important to realize that the `textarea` is treated as a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), with intrinsic dimensions (similar to an `img`), as mentioned [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#styling_with_css). — djvg, May 09 '23 at 13:20

score 361 · Answer 1 · edited Jun 20 '20 at 09:12

361

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

It is equivalent to:

textarea {
    height: 4em;
    width: 50em;
}

where 1em is equivalent to the current font size, thus make the text area 50 chars wide. see here.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 22 '14 at 10:57

user2928048

3,940
2
12
12

48

To be more exact, you need to take `padding` and `line-height` in account. Say you have a padding of half an em at the top and at the bottom and a line-height of 1.2em, then the height for 4 rows would be 1 + 4 * 1.2 = 5.8em. – nalply Feb 18 '14 at 13:16
5

@nalply your solution is correct. The problem is 4em = 4 x font-size which neither factors the padding nor line-height – Nicholas Mar 24 '14 at 08:37
4

If you have property box-sizing:content-box; you will not have to worry about padding, so you remain only with line height. – mikewasmike Apr 21 '15 at 17:07
3

Nice @nalply, thanks for the approach. Adding a little to your answer, the calc() CSS3 function can ease the width/height computation: say I have a textarea with padding-top and padding-bottom 4px, and I want it to be 3 rows high, the height would be `height: calc(3em + 8px);`. – GBU May 10 '17 at 13:47
1

While `rows` attribute is (somewhat) reliable, I wouldn't rely on `cols` attribute unless I'm using monospace fonts on the textarea. See @AlexanderScholz's [updated fiddle](http://jsfiddle.net/ovjz6t54/). – akinuri Dec 06 '19 at 13:35
@akinuri the default behavior is to use a monospaced font in a textarea. – jg6 May 30 '20 at 18:56
The [HTLM spec](https://html.spec.whatwg.org/multipage/rendering.html#the-textarea-element-2) mentions the effective width of the textarea as `size*avg+sbw` where `size` is `cols` (or 20), `avg` is the average font width, `sbw` is the scroll bar width. – djvg May 09 '23 at 13:14

Sampson · Accepted Answer · 2012-10-10T14:16:59.680

115

width and height are used when going the css route.

<!DOCTYPE html>
<html>
    <head>
        <title>Setting Width and Height on Textareas</title>
        <style>
            .comments { width: 300px; height: 75px }
        </style>
    </head>
    <body>
        <textarea class="comments"></textarea>
    </body>
</html>

edited Oct 10 '12 at 14:16

answered Jan 09 '10 at 19:04

Sampson

265,109
74
539
565

15

As per user2928048's answer below, if you use "em" rather than "px" then you can specify the width and height in characters as you would with 'rows' and 'cols' attributes. Even works with IE6 I believe. – Swanny Feb 11 '14 at 21:36
2

While I agree with using `em` for specifying the height, I doubt that it can be used to specify the width. It _might_ work with monospace fonts (after figuring out the width:height ratio of the characters and modifying the width value correspondingly), and that's it. Except monospace, character widths are not fixed, so I don't think `em` or `cols` attribute can help when specifying the width. – akinuri Dec 06 '19 at 13:45
1

I might be wrong, but px didn't work for me; em did. – Jesse Jun 24 '20 at 17:55

score 16 · Answer 3 · answered Jan 09 '10 at 19:07

I don't think you can. I always go with height and width.

textarea{
width:400px;
height:100px;
}

the nice thing about doing it the CSS way is that you can completely style it up. Now you can add things like:

textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}

score 3 · Answer 4 · edited Jun 24 '19 at 20:36

3

As far as I know, you can't.

Besides, that isnt what CSS is for anyway. CSS is for styling and HTML is for markup.

edited Jun 24 '19 at 20:36

Alexander Abakumov

13,617
16
88
129

answered Jan 09 '10 at 19:05

Moulde

3,438
4
29
38

2

CSS is for styling the visual representation of an element. This includes the width and height of a textarea. – Sampson Jan 09 '10 at 19:07
They are not the same, the browser takes into account the height of text on each row including `line-height`, `padding` on the container (not calculating a height based on `box-sizing`), even taking into account different aspect ratios of fonts used to ensure the textbox displays the set number of rows of text which you cannot achieve by using css height. – William Isted Nov 10 '16 at 09:58

akinuri · Answer 5 · 2019-12-06T13:24:08.113

I just wanted to post a demo using calc() for setting rows/height, since no one did.

body {
  /* page default */
  font-size: 15px;
  line-height: 1.5;
}

textarea {
  /* demo related */
  width: 300px;
  margin-bottom: 1em;
  display: block;
  
  /* rows related */
  font-size: inherit;
  line-height: inherit;
  padding: 3px;
}

textarea.border-box {
  box-sizing: border-box;
}

textarea.rows-5 {
  /* height: calc(font-size * line-height * rows); */
  height: calc(1em * 1.5 * 5);
}

textarea.border-box.rows-5 {
  /* height: calc(font-size * line-height * rows + padding-top + padding-bottom + border-top-width + border-bottom-width); */
  height: calc(1em * 1.5 * 5 + 3px + 3px + 1px + 1px);
}

<p>height is 2 rows by default</p>

<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

<p>height is 5 now</p>

<textarea class="rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

<p>border-box height is 5 now</p>

<textarea class="border-box rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

If you use large values for the paddings (e.g. greater than 0.5em), you'll start to see the text that overflows the content(-box) area, and that might lead you to think that the height is not exactly x rows (that you set), but it is. To understand what's going on, you might want to check out The box model and box-sizing pages.

textarea's rows, and cols attribute in CSS

5 Answers5

Linked