CSS 字段大小调整

一行代码即可自动调整包含可编辑内容的元素的大小。

Adam Argyle

如果没有 field-sizing，为了创建大小合适的输入字段，您必须猜测文本字段输入的平均大小，或者使用 JavaScript 计算字符数，并在用户输入文本时增加元素的高度或宽度。换句话说，这并不容易，而且在尝试跟踪用户输入到输入框中的内容时很容易出错。

使用 field-sizing 时，您需要一行 CSS 才能根据内容调整大小。这种基于内容的尺寸调整样式也适用于文本区域以外的其他元素！

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

快捷链接

规范 | 解说员

喜欢短视频？

Wes Bos 和 Jhey 各自在 X 上发布了一个精彩视频，向您介绍 field-sizing。

哪些元素会受到 field-sizing 的影响？

下面列出了 field-sizing 适用的 <form> 元素，并简要说明了它对每个元素的影响。

<textarea>

输入框会收起至 min-inline-size 或适合占位符的大小。

当用户输入内容时，输入框会在内嵌方向上增大，直到达到最大内嵌大小，此时文本会换行，并且输入框的块大小会增大以适应新行。

<select>和<select multiple>

选择元素会缩小以适应所选选项。

具有 multiple 属性的选择框会根据最宽的选项进行扩展，并根据选项数量调整高度。

<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 的默认值是什么？

field-sizing 的默认值为 fixed，并且仅接受 fixed 或 content 这两个值。