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>