CSS如何引入具有自适应高度的输入框样式_利用field-sizing属性（新特性）实现-css教程-PHP中文网

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

css如何引入具有自适应高度的输入框样式_利用field-sizing属性（新特性）实现

field-sizing 目前不是标准 CSS 属性，也未被任何主流浏览器支持 —— 你在文档或实验中看到的 field-sizing 很可能是误传、草案旧稿，或是与 resize、contain-intrinsic-size 等概念混淆了。

该属性从未进入 CSS UI 或 CSS Sizing 规范的正式候选推荐（CR）阶段。Chrome、Firefox、Safari 的最新版本（截至 2024 年中）均不识别 field-sizing，使用它不会产生任何效果，控制台也不会报错，只会静默忽略。

可通过 getComputedStyle(input).fieldSizing 验证：返回 ""（空字符串），而非 "content" 或类似值
CanIUse、MDN、CSSWG GitHub 仓库中均无该属性的跟踪记录
部分文章可能把 textarea 的 rows + resize: vertical 或 WebKit 的私有 -webkit-appearance: textarea 误标为 field-sizing

对，无法原生自适应高度（它始终是单行）；但对，有成熟、稳定、跨浏览器的方案：

用 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，让用户手动拖拽（不自动，但保留控制权）

示例关键代码：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

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; 统一换行行为