Should I Size a Textarea with CSS Width/Height or HTML Cols/Rows Attributes

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

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>

use cols/rows or style-width/height to specify dimensions of textarea?

Please see this question: Should I size a textarea with CSS width / height or HTML cols / rows attributes?

I agree with the top answer. You use rows/cols in case CSS is not supported; if width or height are specified using CSS, they override the value derived from rows/cols.

sizing a textarea with CSS vs with cols and rows

cols and rows are relative to font size. height and width aren't.

http://jsfiddle.net/rVUEE/1/

EDIT: Saying they are relative to "font size" is a bit too simplistic. They take into account things such as line-height and letter-spacing if explicitly set as well.

How to setup textarea rows and resize using html plus css?

If you want to use multiples lines to show the text then use textarea element instead of input.

<textarea id="content " name="content " rows="5" placeholder="Write your content here " required > </textarea>

You can further define your css accordingly

textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  width: 100%;
  padding: 12px 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: normal;
  height: 4em;
  word-wrap: normal;
  vertical-align: top;
  overflow: auto;
}

textarea's rows, and cols attribute in CSS

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>

why is textarea larger in width and height than iframe?

Different padding and border.

Set them the same and they have the same size

iframe, textarea {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  padding: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- here's textarea: -->
  <textarea name="texta" id="texta"></textarea>
  <!-- here's iframe: -->
  <iframe src="" ></iframe>
</body>

</html>

Should I Size a Textarea with CSS Width/Height or HTML Cols/Rows Attributes