在传统网页开发中，input 输入框通常需要设置固定的 width，如果希望输入框随着用户输入内容自动变宽，往往需要借助 JavaScript 监听 input 事件，再动态计算文字宽度。
现在可以直接使用原生 CSS 的 field-sizing 属性实现这一效果。field-sizing 专门用于控制具有默认尺寸的表单控件如何确定自身大小，其中 content 可以让控件根据内容调整尺寸。MDN 已将该特性标记为 Baseline 2026。
field-sizing是什么？
field-sizing 的基本语法非常简单：
input {
field-sizing: content;
}它主要有两个值：
field-sizing: fixed;
field-sizing: content;fixed 是默认行为，表单控件按照浏览器或 CSS 指定的尺寸显示。content 则允许控件根据自身内容调整尺寸。
例如：
<input type="text" placeholder="输入内容">配合：
input {
field-sizing: content;
}用户输入较短文字时，输入框保持较小尺寸。随着内容增加，输入框会自动扩展。
这对于搜索框、标签输入、用户名编辑、聊天输入等场景非常实用。
input实现自适应宽度
下面是一个完整示例：
HTML：
<label>
网站名称：
<input type="text" placeholder="请输入网站名称">
</label>CSS：
input {
field-sizing: content;
min-width: 120px;
max-width: 500px;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 6px;
}这里建议同时设置 min-width 和 max-width。因为单独使用 field-sizing: content 时，输入框可能因为内容过短而变得非常小，也可能因为用户输入大量文字而不断变宽。通过最大、最小宽度可以让布局更加稳定。
textarea也可以自动调整
field-sizing 不仅适用于单行输入框，也可以用于 <textarea>，例如：
HTML：
<textarea
placeholder="输入你的留言内容..."
></textarea>CSS：
textarea {
field-sizing: content;
min-width: 300px;
min-height: 80px;
max-width: 600px;
max-height: 300px;
}这样 textarea 就可以根据内容调整自身尺寸。
需要注意的是，textarea 的自动尺寸变化与单行 input 不完全相同。实际项目中最好结合 min-width、max-width、min-height 和 max-height 控制范围。
相比JavaScript有什么优势？
过去实现自适应输入框，经常需要：
input.addEventListener("input", () => {
input.style.width = `${input.scrollWidth}px`;
});这种方式虽然兼容性较好，但需要监听事件、计算尺寸并不断修改 DOM 样式。
使用 field-sizing 后，逻辑可以直接交给 CSS：
input,
textarea {
field-sizing: content;
}代码更少，也不需要额外的 JavaScript 状态管理，对于简单的自适应表单尤其方便。
实际项目中的推荐写法
在生产环境中，可以这样设计：
.form-input {
field-sizing: content;
min-width: 160px;
max-width: min(100%, 500px);
padding: 10px 14px;
border: 1px solid #d0d5d9;
border-radius: 8px;
font-size: 16px;
}HTML：
<input
class="form-input"
type="text"
placeholder="请输入内容">这种写法既保留了自适应能力，又避免输入框无限增长。
2026年浏览器兼容性
field-sizing 的浏览器支持情况在2026年已经明显改善。目前 Chrome、Edge、Opera 较新的版本已经支持，Firefox 从较新的版本开始支持，Safari 也已经加入支持，因此现代浏览器环境下已经具备较好的使用条件。Can I Use 数据显示，field-sizing: content 当前全球使用覆盖率约为 83.95%。
不过，如果网站仍然需要兼容较旧浏览器，就不应该完全依赖该属性。
可以采用渐进增强策略：
input {
width: 200px;
}
@supports (field-sizing: content) {
input {
field-sizing: content;
min-width: 120px;
max-width: 500px;
}
}不支持 field-sizing 的浏览器继续使用固定宽度，而现代浏览器自动获得自适应效果。
总结
CSS field-sizing: content 最大的价值，就是让表单输入框的尺寸控制变得更加原生化。 对于过去需要 JavaScript 实现的简单自适应输入框，现在只需要几行 CSS 就可以完成。
如果你的项目主要面向现代浏览器，推荐优先考虑 field-sizing: content。如果需要兼容旧浏览器，则可以配合 @supports 或 JavaScript fallback。随着 Firefox、Safari 等浏览器逐步完善支持，这项 CSS 能力在2026年的实际项目中已经越来越值得使用。