先来看一个简单的文本输入框，比如 Instagram 网页端的输入框。
你可能认为，输入框根据输入内容自动调整大小是理所当然的事情——但实际上，要实现这个效果，背后需要写上百行 JavaScript 代码！
现在，借助全新的 CSS 属性 field-sizing，只需一行代码，这个问题就迎刃而解了。下面我们来看看这个既强大又简单的功能是如何工作的。
它是如何运作的？
CSS 新增的 field-sizing 属性有两个值可选：
fixed– 默认值。输入框大小固定，内容再多也不会改变尺寸content– 根据输入内容自动调整输入框的大小
要使用这个属性，只需在 CSS 中加上一行代码：
input, textarea, select {
field-sizing: content;
}
注意事项
设置最小和最大宽度
如果你没有设定最小或最大宽度，输入框会收缩到最小，可能只剩下一个光标的宽度。
为避免这种情况，可以加上 min-width 和 max-width：
input {
min-width: 100px;
max-width: 100%;
}
Textarea 会横向和纵向同时增长
不同于普通的 input，textarea 会根据内容在横向和纵向同时扩展，这对于输入长内容的用户来说非常友好。
为了不让 textarea 初始太小，可以设置一个最小高度：
textarea {
min-width: 100px;
max-width: 300px;
min-height: 3rem;
}
Select 元素也会动态调整大小
默认情况下，<select> 元素的宽度取决于最长的选项。
使用 field-sizing: content; 后，它会根据当前选中的选项来调整宽度，不再像穿了件大号外套那样显得臃肿。
支持 Max-Length
如果你在 input 上设置了 maxlength 属性，输入框只会根据允许的最大字符数进行扩展。
<input type="text" maxlength="10">
实际案例
比如你有一个用户填写简介的区域。以前你必须为 textarea 设置固定的高度和宽度，如果内容太多就会出现滚动条——用户必须不停地滚动查看自己的“人生故事”。
而现在，有了 field-sizing: content;，textarea 会在用户输入时自动扩展，使用体验大大提升。
textarea {
field-sizing: content;
min-height: 3rem;
max-width: 100%;
}
用户现在可以轻松查看自己输入的所有内容，再也不用被讨厌的滚动条困扰了。
使用 field-sizing 的优势
- 不再需要 JavaScript – 以前要用几百行 JS 实现的功能，现在一行 CSS 就搞定了，代码更少、问题更少
- 更好的用户体验 – 输入框不会太小也不会出现烦人的滚动条，用户更开心，开发者也更轻松
- 支持占位符 – 输入框中的 placeholder 也会参与尺寸计算
- 动态的 Select 元素 –
<select>元素会根据当前选项自动调整宽度，不再固定死板 - 渐进增强 – 如果浏览器不支持
field-sizing，输入框仍然会以默认方式显示，不会出问题
也有一些不足
- 浏览器支持有限 – 目前只在基于 Chromium 的浏览器中可用（比如 Chrome 和 Edge），Firefox 和 Safari 还不支持（拜托快点支持吧，这功能太棒了！）
- 并非适用于所有场景 – 普通的文本输入框通常不需要自动调整大小，这个功能可能只适用于 textarea 或特定的交互需求
- 可能导致界面异常 – 如果没有设置好最小或最大尺寸，输入框可能会太小或太大，影响整体 UI 效果
总结
CSS 的新属性 field-sizing 真的是输入框样式控制的一个重大突破。尤其是对我们这些负责底层代码的开发者来说，这能大大减少工作量和出错概率。普通用户可能不会察觉，但你一定能体会到它带来的轻松感。