我应该使用CSS宽度/高度或HTML cols / rows属性来设置textarea的大小吗？

Question

每当我开发一个包含textarea的新表单时，我需要指定其维度时遇到以下困境：

使用CSS或使用textarea的属性cols和rows？

每种方法的优缺点是什么？

使用这些属性的语义是什么？

通常怎么做？

Answer 1

我建议同时使用两者。如果客户端不支持CSS，则行和列是必需且有用的。但作为设计师，我会覆盖它们以获得我想要的尺寸。

建议的方法是通过外部样式表，例如

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

<textarea> </textarea>

Answer 2

对于文本区域，我们可以使用下面的css来修复大小

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

测试angularjs和angular7

Answer 3

CSS

---

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

HTML

---

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

Answer 4

在HTML集中

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

在CSS集中

textarea { height: auto; }

这将触发浏览器将textarea的高度完全设置为行数加上它周围的填充。将CSS高度设置为精确的像素数会留下任意的空格。

Answer 5

根据w3c，cols和rows都是textareas的必需属性。行和列是要适应textarea而不是像素或其他可能任意值的字符数。去行/列。

Answer 6

答案是肯定的。也就是说，你应该同时使用两者。没有行和列（即使您没有显式使用它们也有默认值）如果CSS被禁用或被用户样式表覆盖，则textarea会非常小。始终牢记可访问性问题。话虽如此，如果你的样式表被允许控制textarea的外观，你通常会得到一些看起来更好的东西，适合整个页面设计，并且可以调整大小以跟上用户输入（当然，在良好的品味范围内）。

Answer 7

textarea的大小可以通过cols和rows属性指定，甚至更好;通过CSS'的高度和宽度属性。所有主流浏览器都支持cols属性。一个主要区别是<TEXTAREA ...>是一个容器标签：它有一个开始标签（）。

Answer 8

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

Answer 9

我通常不指定height，但指定width: ...和rows和cols。

通常，在我的情况下，只需要width和rows，因为textarea与其他元素相比看起来不错。 （如果有人不使用CSS，那么cols就是一个后备，正如其他答案所解释的那样。）

（（指定rows和height感觉有点像我想的重复数据？））

Answer 10

如果你不使用每次使用行高：'..'; property它控制textarea的高度和textarea宽度的width属性。

或者您可以通过以下css使用font-size：

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

Answer 11

textareas的一个主要特点是它们是可扩展的。在网页上，如果文本长度超出您设置的空间（使用行，或使用CSS，则可能导致文本区域中出现滚动条。当用户决定打印时，这可能是一个问题，尤其是'打印'到PDF - 所以使用条件CSS规则为打印的textareas设置一个舒适的大小高度：

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