field-sizing

content

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

fixed

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

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

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

• 接受用户直接文本输入的表单输入类型。这包括email、number、password、search、tel、text 和url 类型。
  • 如果未在控件上设置最小宽度，则它将仅与文本光标一样宽。
  • 具有placeholder 属性的控件将呈现足够大的尺寸以显示占位符文本。
  • <input> 元素的size 属性修改了此类元素的默认首选大小。因此，size 对设置了 field-sizing: content 的 <input> 元素没有影响。
• file 输入。无法进行直接文本输入；但是，当用户选择要上传的新文件时，显示的文件名会发生变化。当设置 field-sizing: content 时，控件将更改大小以收缩包装文件名。
• <textarea> 控件。值得注意的是，设置了 field-sizing: content 的 <textarea> 元素的行为与单行文本控件非常相似，并增加了以下内容
  • 如果 <textarea> 元素由于宽度限制而无法增长，则它们将开始在高度上增长以显示更多内容行。当达到高度限制时，它们将开始显示滚动条以允许查看所有内容。

  • <textarea> 元素的 rows 和 cols 属性会修改其默认的首选大小。因此，当 <textarea> 元素设置了 field-sizing: content 时，rows/cols 属性将不会生效。
• <select> 控件。当设置了 field-sizing: content 时，它们的运作方式与预期略有不同。效果取决于您正在创建的 <select> 控件的类型。
  • 常规的下拉框会在选择新值时更改其宽度，以始终适合显示的选项值。（默认情况下，下拉框的大小设置为足以显示最长的选项值。）
  • 列表框（具有 multiple 或 size 属性的 <select> 元素）将足够大，可以显示所有选项而无需滚动。（默认情况下，下拉框需要滚动才能查看所有选项值。）
  • 当 <select> 元素设置了 field-sizing: content 时，size 属性几乎没有效果。在这种情况下，浏览器会检查 size 是否等于 1，以确定 <select> 控件应该显示为下拉框还是列表框。但是，它始终会显示列表框中的所有选项，即使 size 小于选项数。

如果您使用其他 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. [email protected]" />
</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 与其他大小属性一起使用时的效果。

此示例说明了 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 中，仅对第一组 <select> 元素设置了 field-sizing: content。

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;
}

select {
  valign: top;
}

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

结果

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

• 下拉菜单始终适合显示选项的大小，并在选择不同的选项时更改大小。如果没有 field-sizing: content，则大小会固定为最长选项的宽度。
• 多选列表框会立即显示所有选项。如果没有 field-sizing: content，则用户必须滚动框才能查看所有选项。

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