一行代码,用于自动调整元素大小,且内容可编辑。
如果没有 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
这两个值。