HTML在各个浏览器中固定textarea的大小和禁止textarea拖动

知道91 | Web前端 | 2014-09-15 | 阅读:30606

HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局,使页面变得不美观。

Textarea 固定大小

可以通过添加如下两个样式禁用拖动,固定大小:

彻底禁用拖动

 <textarea style="resize:none;width:600px;height:200px;"></textarea>

效果如下:

只是固定大小,右下角的拖动图标仍在

 <textarea style="width:600px;height:200px;"></textarea>

效果如下:

textarea也可以设置自动增高,如下面的代码

 <textarea type="text" style="width:260;overflow-x:visible;overflow-y:visible;"></textarea>