如何使用CSS禁止textarea调整大小
墨初 Web前端 1511阅读
HTML页面中的 textarea 输入框在默认情况下是可以通过拖动右下角的一个小三角来改变其高度与宽度的,但改变了 textarea 的高度与宽度可能会造成周围其它div元素的变形。为了保持页面元素不变形,一般都会使用CSS来禁止 textarea 元素的大小被改变,其方法如下。
css resize 属性
resize:为CSS样式中的一个属性,可以通过其属性值来规定 textarea 元素是否可以被改变大小。
语法:
resize: none|both|horizontal|vertical;
参数:
值 | 描述 |
---|---|
none | 规定用户无法调整元素的尺寸。 |
both | 规定用户可调整元素的高度和宽度。 |
horizontal | 规定用户可调整元素的宽度。 |
vertical | 规定用户可调整元素的高度。 |
css 禁止 textarea 调用大小的方法
参考上面的 css 中的 resize 属性,如果将其值设置为 none,则用户无法调整元素的尺寸。
<style> textarea{ width:100px; height: 50px; } </style> <textarea>我的大小可以变!</textarea> <textarea style="resize: none;">我的大小不能变!</textarea> <p>73so.com</p>