CSS怎样引入具有自适应高度的输入框样式_借助field-sizing属性（新特性）实现

作者：袖梨 2026-07-29

field-sizing 不是标准 CSS 属性，未被任何主流浏览器支持，也未进入 CSS 规范正式阶段；它属误传或概念混淆，实际应使用 textarea 配合 JS 动态调整 height 实现自适应。

field-sizing 先要明确的是，它目前并非标准 CSS 属性，任何主流浏览器也都不支持——你在文档或实验中见到的 field-sizing 很可能源自误传或草案旧稿，也可能是和 resize、contain-intrinsic-size 等概念发生了混淆。

截至 2024 年中，无论 Chrome、Firefox 还是 Safari，其最新版本都不识别该属性；在 CSS UI 与 CSS Sizing 规范中，它也从未走到正式候选推荐（CR）阶段。 field-sizing，浏览器只会静默忽略：既无任何效果，也不在控制台报错。

可以通过 getComputedStyle(input).fieldSizing 进行验证：结果会返回 ""（空字符串），并非 "content" 或其他类似值
该属性没有跟踪记录，无论查询 CanIUse、MDN 还是 CSSWG GitHub 仓库
一些文章可能将 textarea 中的 rows + resize: vertical ，或者 WebKit 私有的 -webkit-appearance: textarea 错误标记为 field-sizing

对于 <input type="text">而言，原生自适应高度无法实现，因为它始终保持单行；但对于 <textarea>，则已有成熟、稳定且能跨浏览器使用的方案：

使用 min-height + height: auto + overflow: hidden + resize: none 并结合 JS 监听 input 事件，以动态调整高度
更轻量的方式是利用 scrollHeight 和 clientHeight 之间的差值触发重新设置，反复 layout 应予避免（例如：完成监听便立即 el.style.height = "auto"; el.style.height = el.scrollHeight + "px";）
CSS-only 的折中办法：配置 min-height 以及 max-height，并启用 resize: vertical，允许用户手动拖拽；它不能自动调整，但保留了控制权

关键示例代码如下：

立即学习“前端免费学习笔记（深入）”；

textarea {  min-height: 24px;  max-height: 120px;  height: auto;  resize: none;  overflow: hidden;  line-height: 1.4;  padding: 6px 8px;}

JS 部分的核心逻辑只需一行，并放入 input 事件中：

el.style.height = "auto";el.style.height = Math.min(el.scrollHeight, 120) + "px";

失效与抖动，是很多“自动高度”方案在下列场景中的常见表现：

在字体完成加载前进行计算 → scrollHeight 结果偏小，需要监听 fontload 或采用延迟初始化
设置了 box-sizing: border-box 但没把 padding 和 border 从 scrollHeight 中剔除 → 实际应： el.scrollHeight - parseInt(getComputedStyle(el).paddingTop) - parseInt(getComputedStyle(el).paddingBottom)
在 React/Vue 中直接进行操作 style.height，却没有配合 useLayoutEffect 或者 onUpdated → 输入发生时会瞬间跳动
移动端 iOS Safari 对 textarea 其中的 scrollHeight 计算不够稳定，建议增加 white-space: pre-wrap; word-break: break-word; 来统一换行表现