Raú*_*ràs 286 html css textarea
每当我开发一个包含a的新表单textarea时,我需要指定其维度时遇到以下困境:
使用CSS或使用textarea的属性cols和rows?
每种方法的优缺点是什么?
使用这些属性的语义是什么?
通常怎么做?
kog*_*ure 250
我建议同时使用两者.如果客户端不支持CSS,则行和列是必需且有用的.但作为设计师,我会覆盖它们以获得我想要的尺寸.
建议的方法是通过外部样式表,例如
textarea {
width: 300px;
height: 150px;
}Run Code Online (Sandbox Code Playgroud)
<textarea> </textarea>Run Code Online (Sandbox Code Playgroud)
Jan*_*ven 87
在HTML集中
<textarea rows="10"></textarea>
Run Code Online (Sandbox Code Playgroud)
在CSS集中
textarea { height: auto; }
Run Code Online (Sandbox Code Playgroud)
这将触发浏览器将textarea的高度完全设置为行数加上它周围的填充.将CSS高度设置为精确的像素数会留下任意的空格.
根据w3c,cols和rows都是textareas的必需属性.行和列是要适应textarea而不是像素或其他可能任意值的字符数.去行/列.
对于文本区域,我们可以使用下面的 css 来固定大小
<textarea class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>
Run Code Online (Sandbox Code Playgroud)
在 angularjs 和 angular7 中测试
小智 6
<textarea style="width:300px; height:150px;" ></textarea>
Run Code Online (Sandbox Code Playgroud)
答案是肯定的.也就是说,你应该同时使用两者.没有行和列(即使您没有显式使用它们也有默认值)如果CSS被禁用或被用户样式表覆盖,则textarea会非常小.始终牢记可访问性问题.话虽如此,如果你的样式表被允许控制textarea的外观,你通常会得到一些看起来更好的东西,适合整个页面设计,并且可以调整大小以跟上用户输入(当然,在良好的品味范围内).
小智 5
HTML 行和列没有响应!
所以我在CSS中定义了尺寸。提示:如果您为手机定义小尺寸,请考虑使用textarea:focus {};
在这里添加一些额外的空间,只有当用户想要实际写东西的时候才会展开