CSS 字段大小调整

一行代码，用于自动调整具有可修改内容元素的尺寸。

Adam Argyle

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

借助 field-sizing，您只需一行 CSS 即可根据内容启用尺寸调整。这种基于内容调整大小的样式也适用于 textarea 以外的元素！

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

Browser Support

• 123
• 123
• x
• 26.2

Source

快捷链接

规范 | 解说员

喜欢短视频？

Wes Bos 和 Jhey 各自都在 Twitter 上发布了一段精彩的视频，向您介绍 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 影响之前和之后的状态。

在 Codepen 上试用

仔细观察

使用 [placeholder] 时，占位符会成为内容。虽然之前已提及，但此处仍需强调，因为在设置表单样式时，了解这一点非常重要。长占位符或短占位符会更改具有 field-sizing: content 的输入的固有大小。

在 Codepen 上试用

空样式和溢出样式处理

使用 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 这两个值。