在web页面中 textarea 元素是默认可以通过鼠标来拖动大小的,但CSS也提供了一个 resize 属性,此属性可以用来设置 textarea 是否可以被鼠标拖动大小,以及拖动的方向等等。

textarea 的 resize 属性

resize:用来定义 textarea 元素是否可以被拖动大小。

属性值:

none:不能调整元素的尺寸;

both:可调整元素的高度和宽度;

horizontal:可调整元素的宽度;

vertical:可调整元素的高度。

textarea 的 resize 属性示例

示例1:

禁止 textarea 被拖动

代码:

<textarea name="" style="width:100px;height: 100px;resize:none;">飞鸟慕鱼博客</textarea>

textarea 的 resize 属性介绍与使用方法

示例2:

只允许 textarea 被上下拖动改变大小

<textarea name="" style="width:100px;height: 100px;resize:vertical;">飞鸟慕鱼博客</textarea>

textarea 的 resize 属性介绍与使用方法

示例3:

只允许  textarea 被左右拖动改变大小

<textarea name="" style="width:100px;height: 100px;resize:horizontal;">飞鸟慕鱼博客</textarea>

textarea 的 resize 属性介绍与使用方法