CSS 字段大小调整

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

Adam Argyle

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

对于 field-sizing，您只需一行 CSS 即可实现根据内容调整大小。这种基于内容的大小调整样式不仅适用于 textarea，还适用于其他元素！

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

浏览器支持

• 123
• 123
• x
• x

来源

快捷链接

规范 | 解说

喜欢短视频？

Wes Bos 和 Jhey 在 Twitter 上各自发布了一段精彩的视频，介绍了 field-sizing。

哪些元素会受到字段大小的影响？

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

<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 Shaded 称之为“防御性 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 这两个值。