一行代码，用于自动调整元素大小，且内容可编辑。
如果没有 field-sizing，若要创建大小合适的输入字段，您必须猜测文本字段输入的平均大小，或使用 JavaScript 统计字符数，并随着用户输入文本增加元素高度或宽度。换句话说，这并不容易，并且在尝试跟踪用户输入的内容时很容易出错。
使用 field-sizing 时，您需要一行 CSS 才能根据内容启用大小调整。这种基于内容的尺寸样式也适用于文本区域以外的用途！
textarea, select, input {
field-sizing: content;
}
快捷链接
喜欢短视频？
Wes Bos 和 Jhey 在 Twitter 上分别制作了一段介绍 field-sizing 的精彩视频。
字段大小调整会影响哪些元素？
下面列出了 field-sizing 支持的 <form> 元素，并简要了解了该元素对每个元素的影响。
<textarea>
输入会向下收起为 min-inline-size 或以适应占位符。
随着用户输入不断发展，输入文本会按内嵌方向不断扩大，直到达到最大内嵌大小，此时文本将换行，而输入的块大小也会增大以适应新的行。
<select> 和 <select multiple>
选择元素会缩小以适应所选选项。
具有 multiple 属性的 select 会扩展，以适应最宽的选项，并可根据选项数量增加所需的高度。
<input type="text">、<input type="email">和<input type="number">
输入会向下收起为 min-inline-size 或以适应占位符。
随着用户输入内容，输入沿内嵌方向不断增长，直到达到 max-inline-size，此时溢出会裁剪输入值。
<input type="file">
输入内容会收起到按钮和预填充的文件名文本。
上传文件后，输入内容将与按钮加文件名文本一样宽。
查看、测试和比较结果
下面是一个极简的互动示例，展示了每个表单元素的前后行为（受 field-sizing 影响）。
靠近时看
使用 [placeholder] 时，占位符会成为内容。前面提到过，不过此处已提及，因为在设置表单样式时了解这一点非常重要。长占位符或短占位符将通过 field-sizing:
content 更改输入的固有大小。
空样式和溢出样式处理
使用 field-sizing 意味着您必须执行一些额外的工作。Ahmad Shadeed 将其称为“防御性 CSS”，在这种情况下，其目标不一定是准确说明某些内容的行为或外观，而是为了避免它进入不理想的视觉状态。以前，输入具有相当多的固定大小，但在应用 field-sizing: content 后，输入可能会变得太小或太大。
以下样式是一个很好的起点。它们有助于元素不会合拢为过小的框，还有助于避免使元素变得太大（在 textarea 中）。
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;
}
此 CSS 使用相对单位来确定尺寸。新的 lh 单元非常适合块大小，而 ch 则非常适合内嵌大小。
字段大小调整的默认值是什么？
field-sizing 的默认值为 fixed，只接受 fixed 或 content 这两个值。