textarea标签的resize属性怎么禁用_HTML多行文本框拖拽控制-html教程-PHP中文网

resize: none 是禁用 textarea 拖拽最直接方式，但必须配合 overflow: auto（或 hidden）才生效，因 CSS 规范要求 resize 仅在 overflow 非 visible 时起作用；默认 overflow: visible 会导致该样式被忽略。

textarea标签的resize属性怎么禁用_html多行文本框拖拽控制

resize: none 是禁用 textarea 拖拽调整大小最直接有效的方式，现代浏览器（Chrome 1+、Firefox 4+、Edge 12+、Safari 5.1+）全部支持，无需 polyfill。

为什么加了 `resize: none` 还能拖？

常见原因是 overflow 没配对。CSS 规范要求：只有当元素的 overflow 不是 visible 时，resize 才会生效（哪怕你设的是 none）。默认 textarea 的 overflow 是 visible，所以样式会被忽略。

必须显式设置 overflow: auto 或 overflow: hidden（推荐 auto，保留滚动能力）
错误写法：textarea { resize: none; }（无 overflow，不生效）
正确写法：textarea { resize: none; overflow: auto; }
如果同时设了 max-height 却漏掉 overflow，内容溢出会被直接裁剪，用户看不到滚动条

只禁用部分 `textarea` 的拖拽

用 CSS 选择器精准控制，避免全局污染。注意优先级和作用范围：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

按 class：.fixed-textarea { resize: none; overflow: auto; }，然后在 HTML 中写
按 name 属性：textarea[name="comment"] { resize: none; overflow: auto; }
按 id：#bio-field { resize: none; overflow: auto; }
慎用内联样式：，调试时难覆盖，维护成本高

移动端和兼容性要注意什么

绝大多数情况没问题，但有两个真实存在的坑：

老版本 Android WebView（尤其 Android 4.x 系统自带浏览器）可能忽略 resize: none，建议真机测试，别只信模拟器
IE 10 及更早版本完全不支持该属性，不过 2026 年基本可忽略；若真要兜底，只能 JS 拦截：element.addEventListener('mousedown', e => { if (e.target === element && e.offsetX > element.offsetWidth - 10 && e.offsetY > element.offsetHeight - 10) e.preventDefault(); })，但没必要为 IE 写这种逻辑
resize: vertical 或 resize: horizontal 在 Safari 和 Chrome 上表现稳定，但 Firefox 对 horizontal 支持较弱（有时宽度仍可微调），如需单向控制，优先用 vertical + width: 100% 锁死水平方向

真正容易被忽略的不是怎么关掉拖拽，而是关掉之后怎么处理内容溢出——resize: none 只去掉右下角小方块，它不帮你管高度适配、滚动条出现时机或移动端 touch 区域响应。这些得靠 overflow、max-height、甚至 JS 监听 input 事件做自动伸缩来补全。