表单宽高我算了五年，现在浏览器自己会量了——`field-sizing: content` 把我从 JS 里解放出来了

每次做表单，总要在 input 旁边塞一个隐藏的测量文字，然后算完还要处理 resize 事件——这种事我折腾了得有五年了。2026 年，CSS 终于给了一个原生答案：field-sizing: content。

写表单最烦的不是样式本身，是每次碰到 input、select 或者 textarea，都要先问自己：这个宽度到底写多少合适？

定死了，用户输入一长串字符串就被截掉；用 min-width/max-width，resize 事件要单独处理，缩放时还要防抖，一来二去小三百行 JS 就进去了。

2026 年，field-sizing 这个属性正式进 Baseline 了——Chrome 123+、Safari 17.4+、Firefox 129+ 都支持。用了它之后，表单元素自己会跟着内容撑开，我试了一圈，发现这次不是 demo 玩具，是真的能上生产。

一行声明，把测量 JS 全删了

field-sizing: content 的用法就是字面意思：让表单元素根据内容自动调整尺寸。

input, select, textarea {
  field-sizing: content;
}

就这么多。以下这些元素都会自动适应内容：

• 文本类 input（text、email、password、search、tel、url）
• number 类型 input
• file 类型的 input（文件名长短不同，控件宽度自动跟着变）
• textarea
• select（下拉框和 list box 都支持）

<!-- 文本输入：输入多少字，框就撑多宽 -->
<input type="text" placeholder="请输入姓名" />

<!-- textarea：内容多了自动长高 -->
<textarea placeholder="请输入备注"></textarea>

<!-- select：选项文字长短不同，宽度自动适配 -->
<select>
  <option>短选项</option>
  <option>这是一个非常长的选项文字</option>
</select>

placeholder 也会被算作内容，所以有默认提示的输入框会一开始就显示合适的宽度，不会只露一个光标在那闪。

几个真实场景的坑，我都踩过了

1. max-width 会阻断自动撑开

field-sizing: content 会尊重 max-width，达到上限后就不再撑开，而是显示滚动条或溢出。这一点需要注意：如果你想让它”尽量撑，但别无限撑”，要配合 max-width 一起用：

input {
  field-sizing: content;
  min-inline-size: 7ch;
  max-inline-size: 50ch;
}

Adam Argyle 在 Chrome 官方博客里给了一组参考值，可以直接抄：

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}
select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}
input {
  min-inline-size: 7ch;
}

2. textarea 在宽度受限时会自动长高

这个很实用：当你给 textarea 限制了宽度，它不会像以前一样溢出自适应高度，而是自动换行增加高度，在高度约束也达到之后，才会出现滚动条。

3. select 的下拉框和 list box 表现不一样

• 普通下拉框：每次选中不同选项，宽度会自动重新计算（始终刚好包住最长选项的文字）
• list box（加了 multiple 或 size 属性）：一次显示所有选项，不需要滚动

4. 渐进增强，写了不亏

不支持 field-sizing 的浏览器会忽略这个属性，继续按默认 fixed 方式渲染，不会出 bug。所以可以直接写，不需要 polyfill 或 @supports 判断。

和旧的 size 属性、cols/rows 比起来怎么样？

以前给 input 加 size="200" 只能对部分类型生效，number 类型根本不认。textarea 用 cols 和 rows 只能控制列数和行数，单位是字符，不是像素，体验很僵硬。

field-sizing: content 才是真正的 CSS 级别的尺寸控制，可以和所有其他 CSS 尺寸属性配合工作，而且写法只有一行。

什么时候用，什么时候别用

适合用：

• 评论框、备注框这类用户可能输入长短差距很大的场景
• select 选项文字长度不确定的设计
• file input 文件名长短不一的情况
• 搜索框这种 placeholder 文字很长的场景

不太适合：

• 固定布局的表格式表单，宽度要对齐网格的
• 需要精确控制占地宽度的营销页表单

下一步可以做什么

如果你现在手头有表单相关的页面，加一行试试：

input, textarea, select {
  field-sizing: content;
}

看看用户输入的时候宽高是怎么变化的。然后根据实际效果，配合 min/max-inline-size 调一下上下限，这个流程就完整了。

之前折腾的那些 resize 监听和文字宽度测量代码，基本可以删了。