直接加 resize: none 即可彻底去掉 textarea 右下角拖拽把手，这是浏览器原生支持、兼容所有现代浏览器的最简洁解法；需作用于 textarea 元素本身，避免被其他样式覆盖，且不可用 vertical 或 horizontal 替代。
textarea 右下角拖拽把手怎么彻底去掉
直接加 resize: none 就行，这是最干净、最通用的解法。它不依赖 JavaScript，也不需要监听事件或计算尺寸，浏览器原生支持，所有现代浏览器（Chrome、Firefox、Safari、Edge）都认这个规则。
常见错误是只写 resize: vertical 或 resize: horizontal，以为能“限制方向”，但实际仍会显示拖拽把手，只是方向受限——用户依然能拉，布局照样可能崩。真要禁用，必须是 none。
-
resize: none必须作用于textarea元素本身，不能只写在父容器上 - 如果用了 CSS-in-JS（比如 styled-components），确保样式优先级足够高，没被其他规则覆盖
- 某些 UI 框架（如 Bootstrap 5+）默认没重置
resize，得自己补
为什么设置了 resize: none 还能拖？
大概率是样式没生效。检查三件事：
- 开发者工具里看 computed 样式，确认
resize确实是none，而不是initial或auto - 有没有更具体的 CSS 选择器（比如
.form-control textarea）覆盖了你的规则？试试加!important临时验证 - 是否在
<textarea></textarea>标签内联写了style="resize: both;"？内联样式优先级高于外部 CSS，得删掉或覆盖
固定大小还要配 width/height 吗
要。仅靠 resize: none 只禁拖拽，不锁尺寸——用户粘贴超长内容、缩放页面、换字体后，textarea 仍可能撑开或收缩。
推荐组合写法：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
textarea {
resize: none;
width: 100%;
min-width: 300px;
max-width: 600px;
height: 120px;
min-height: 120px;
max-height: 120px;
}
注意：min-height 和 max-height 设成一样，才能真正锁死高度；width: 100% 配合 min/max-width 是响应式安全写法，比写死 400px 更稳妥。
Bootstrap 模态框里 textarea 拉伸失效怎么办
Bootstrap 的 .modal-body 默认有 overflow: auto，而某些版本的模态框组件会把 textarea 包在弹性容器里，导致 resize: none 生效但视觉上“还能动”——其实是父容器滚动条在动，不是 textarea 本身在拉伸。
解决方法很简单：
- 给
textarea加flex-shrink: 0防止被压缩 - 给父容器（比如
.modal-body）加overflow: visible或overflow: unset - 避免同时设
rows和height，二者冲突时浏览器渲染行为不一致
真正容易被忽略的是：禁用拖拽只是第一步，后续内容溢出、换行、自动高度等行为，得靠 overflow-y、white-space、word-break 等配合控制——resize: none 解决不了内容撑开的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
