【洋洋电脑帮】博客主要分享生活中的经历经验和IT运维工作、计算机自学过程中遇到的问题及解决办法,还分享好用的【软件和各种资源】等。坚持+自律=开挂人生。

textarea禁止拉伸,禁止拖拽大小

标签: textarea css+div
作者:洋洋电脑帮 | 发布时间:2025-03-30 18:47:42 | 阅读:1 | 评论:0

本文介绍如何通过css样式设置textarea属性设置textarea大小,禁止随意拉伸和拖拽大小,实现固定大小。

html实现代码如下

<textarea id="test" style="height:100px;width:200px;resize: none;"></textarea>

测试环境

Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.218 Safari/535.1

 

禁止拖拽大小代码说明

resize: none;彻底禁用拖动
width: 200px;
height: 100px;
max-width: 200px;
max-height: 100px;

实现的效果是:只是固定大小,右下角的拖动图标仍在,见一下效果图。

textarea禁止拉伸,禁止拖拽大小

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


 

更多相关推荐

为了给您带来更好的浏览体验,我日夜打磨网站。若您喜欢这里的内容,不妨用打赏为我点赞。您的每一分支持,我都将化作持续创作的热情,为您呈上更多优质内容。
微信
支付宝
评论区




登录页面验证码图片