field-sizing

语法

/* Keyword values */
field-sizing: content;
field-sizing: fixed;

/* Global values */
field-sizing: inherit;
field-sizing: initial;
field-sizing: revert;
field-sizing: revert-layer;
field-sizing: unset;

值

content

允许元素调整其大小以适应其内容。

fixed

为元素设置一个固定大小。这是默认值。

描述

field-sizing: content 覆盖了表单元素的默认首选尺寸。此设置提供了一种简单的方法来配置文本输入框，使其能够收缩包裹其内容并在输入更多文本时增长。当它们达到最大尺寸限制（由其容器元素的大小或通过 CSS 设置）时，它们将停止扩展，此时需要滚动才能查看所有内容。

受 field-sizing: content 影响的元素

具体来说，将 field-sizing 设置为 content 会影响以下元素：

• 接受用户直接文本输入的表单输入类型。这包括 email、number、password、search、tel、text 和 url 类型。
  • 如果控件上没有设置最小宽度，它的宽度将仅与文本光标一样宽。
  • 带有 placeholder 属性的控件将被渲染得足够大以显示占位符文本。
  • size 属性会修改此类 <input> 元素的默认首选大小。因此，size 对设置了 field-sizing: content 的 <input> 元素没有影响。
• file 输入框。无法直接输入文本；但是，当用户选择要上传的新文件时，显示的文件名会发生变化。当设置了 field-sizing: content 时，控件将改变大小以收缩包裹文件名。
• <textarea> 控件。值得注意的是，设置了 field-sizing: content 的 <textarea> 元素的行为与单行文本控件非常相似，但有以下补充：
  • 如果 <textarea> 元素由于宽度限制而无法增长，它们将开始在高度上增长以显示更多的内容行。当达到高度限制时，它们将开始显示滚动条以允许查看所有内容。
  • rows 和 cols 属性会修改 <textarea> 的默认首选大小。因此，rows/cols 对设置了 field-sizing: content 的 <textarea> 元素没有影响。
• <select> 控件。当设置了 field-sizing: content 时，它们的行为可能与你预期的有所不同。效果取决于你创建的 <select> 控件的类型：
  • 常规下拉框将在选择新值时改变其宽度，以始终适应所显示的选项值。（默认情况下，下拉框的大小被设置为足以显示最长的选项值。）
  • 列表框（带有 multiple 或 size 属性的 <select> 元素）将变得足够大以显示所有选项，而无需滚动。（默认情况下，下拉框需要滚动才能查看所有选项值。）
  • size 属性对设置了 field-sizing: content 的 <select> 元素几乎没有影响。在这种情况下，浏览器会检查 size 是否等于 1，以确定 <select> 控件应显示为下拉框还是列表框。但是，即使 size 小于选项数量，它也总是会显示列表框的所有选项。

field-sizing 与其他尺寸设置的交互

如果使用其他 CSS 尺寸属性，field-sizing: content 为表单控件提供的尺寸灵活性可能会被覆盖。在使用 field-sizing: content 时，应避免设置固定的 width 和 height，因为它们会重新为控件施加固定的大小。但是，将 min-width 和 max-width 等属性与 field-sizing: content 一起使用非常有效，因为它们允许控件随着输入的文本增长和收缩，同时也防止控件变得过大或过小。

maxlength 属性会导致控件在达到最大字符限制时停止增长。

正式定义

正式语法

field-sizing = 
  fixed    |
  content  

示例

增长和收缩的文本字段

此示例说明了 field-sizing: content 对单行和多行文本字段的影响。这些字段会随着文本的添加或删除而调整其大小，有效地收缩包裹内容，直到达到尺寸的下限或上限。

HTML

此示例中的 HTML 包含三个表单字段，每个字段都有一个关联的 <label>：两个类型为 text 和 email 的 <input> 元素，以及一个 <textarea> 元素。

<div>
  <label for="name">Enter name:</label>
  <input type="text" id="name" maxlength="50" />
</div>
<div>
  <label for="email">Enter email:</label>
  <input type="email" id="email" maxlength="50" placeholder="e.g. a@b.com" />
</div>
<div>
  <label for="comment">Enter comment:</label>
  <textarea id="comment">This is a comment.</textarea>
</div>

请注意有关 HTML 的以下几点：

• 前两个字段设置了 maxlength 属性，当达到字符限制时，该属性会阻止字段大小增加。
• <textarea> 将在内联方向上增长，直到达到 min-width 约束（在下面的 CSS 代码中设置）的边缘，然后开始在块方向上添加新行以容纳后续字符。
• email 输入框设置了占位符。这使得该字段渲染得足够大以显示整个占位符。一旦该字段获得焦点并且用户开始输入，该字段的大小将变为 min-width 值。没有占位符的 text 字段最初以 min-width 渲染。

CSS

在 CSS 中，我们对三个表单字段设置了 field-sizing: content，以及 min-width 和 max-width 来限制输入框的大小。值得重申的是，如果在字段上没有设置最小宽度，它们将只被渲染成与文本光标一样宽。

我们还为 <label> 提供了一些基本的样式，以便它们整齐地位于字段旁边。

body {
  box-sizing: border-box;
  padding: 20px;
}

div {
  margin-bottom: 20px;
  display: flex;
}

input,
textarea {
  field-sizing: content;
  min-width: 50px;
  max-width: 350px;
}

label {
  width: 150px;
  margin-right: 20px;
  text-align: right;
}

结果

尝试在下面的字段中输入和删除文本，以探索 field-sizing: content 与其他尺寸属性一起使用的效果。

控制 <select> 元素的显示

此示例说明了 field-sizing: content 对 <select> 元素的影响，包括下拉菜单类型和多行列表框类型。

HTML

HTML 包含两组 <select> 元素：一组应用了 field-sizing: content，另一组没有，以便你看到差异（尽管效果可能不如在文本字段上那么明显）。每组包括一个下拉菜单类型和一个多行列表框类型（设置了 multiple 属性）。

<div class="field-sizing">
  <h2>With <code>field-sizing: content</code></h2>
  <select>
    <option>Bananas</option>
    <option>Strawberries</option>
    <option selected>Apples</option>
    <option>Raspberries</option>
    <option>Pomegranate</option>
  </select>
  <select multiple>
    <option>Bananas</option>
    <option>Strawberries</option>
    <option>Apples</option>
    <option>Raspberries</option>
    <option>Pomegranate</option>
  </select>
</div>
<div>
  <h2>Without <code>field-sizing: content</code></h2>
  <select>
    <option>Bananas</option>
    <option>Strawberries</option>
    <option selected>Apples</option>
    <option>Raspberries</option>
    <option>Pomegranate</option>
  </select>
  <select multiple>
    <option>Bananas</option>
    <option>Strawberries</option>
    <option>Apples</option>
    <option>Raspberries</option>
    <option>Pomegranate</option>
  </select>
</div>

CSS

在 CSS 中，field-sizing: content 仅在第一组 <select> 元素上设置。

body {
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  font-family: sans-serif;
}

h2 {
  margin-top: 0;
  font-size: 1rem;
  text-align: center;
  flex: 1 0 100%;
}

div {
  margin-bottom: 20px;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-flow: row wrap;
}

.field-sizing select {
  field-sizing: content;
}

结果

请注意 field-sizing: content 的以下效果：

• 下拉菜单始终适应所显示选项的大小，随着选择不同选项而改变大小。没有 field-sizing: content 时，大小固定为与最长选项一样宽。
• 多选列表框一次显示所有选项。没有 field-sizing: content 时，用户必须滚动框才能查看所有选项。

规范

浏览器兼容性

另见

• <input>
• <select>
• <textarea>