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

问题

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?

回答1:

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>

回答2:

In HTML set

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

In CSS set

textarea { height: auto; }

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.

回答3:

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.

回答4:

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).

回答5:

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 ().

回答6:

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

回答7:

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

回答8:

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?))

回答9:

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;  
}
}

回答10:

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%;
}

回答11:

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

回答12:

CSS

---

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

HTML

---

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

来源：https://stackoverflow.com/questions/3896537/should-i-size-a-textarea-with-css-width-height-or-html-cols-rows-attributes