的 CSS 的

Question

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

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

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

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

通常如何做？

Answer 1

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

推荐的方法是通过外部样式表，例如

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

<textarea> </textarea>

Answer 2

在HTML集中

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

在CSS集中

textarea { height: auto; }

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

HTML行和列没有响应！

所以我定义CSS的大小。提示：如果您为手机定义了小尺寸，请考虑使用textarea:focus {};

在此处添加一些额外的空间，这只会在用户想要实际写东西的时候展开

Answer 8

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

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

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

Answer 9

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

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

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

Answer 10

YES!....始终使用 CSS 设置 textarea 样式并避免使用属性，除非您需要支持一些不支持样式表的非常旧的代理。否则，您将拥有使用 CSS 的全部权力。下面是我在任何网站上看起来都很漂亮的 textarea 的默认 CSS 格式。随心所欲地定制它。下面包含评论，以便您了解我选择这些 CSS 属性和值的原因：

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

在我的“重置”元素样式表中，默认情况下我将这些值设置为 “textarea” 的默认值，这使您的所有文本区域在检测到滚动时具有漂亮的外观和感觉，一个调整大小的选项卡（非 IE 浏览器），并修复了尺寸，包括允许框根据您为用户放入的现有内容自行调整大小的高度以及不会超出其父容器限制的宽度。

Answer 11

对于文本区域，我们可以在css下面使用它来固定大小

* *
* *
*****
* *
* *

在angularjs和angular7中进行了测试

Answer 12

的 CSS 的

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

的 HTML 的

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

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

12 个答案:

的 CSS 的

的 HTML 的