CSS 欄位大小

使用可編輯內容自動調整元素大小的程式碼行。

Adam Argyle

如果沒有 field-sizing，如要建立適當大小的輸入欄位，您必須輸入文字欄位輸入的平均大小，或是使用 JavaScript 計算字元，以及隨著使用者輸入文字時，增加元素高度或寬度。換句話說，如果要追蹤使用者輸入內容，就會發生錯誤。

使用 field-sizing 時，您需要一行 CSS 來根據內容啟用大小設定。這種以內容為依據的大小設定樣式也適用於其他元素，而非僅限於 textarea！

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

快速連結

規格 | 說明

喜歡短篇影片嗎？

Wes Bos 和 Jhey 在 Twitter 上各自發布了一部精彩影片，介紹 field-sizing。

哪些元素會受到欄位大小的影響？

以下是 field-sizing 適用的 <form> 元素清單，以及各元素的效果摘要。

<textarea>

輸入內容會收合為 min-inline-size，或是配合預留位置的大小。

使用者輸入內容時，輸入內容會沿著內嵌方向擴大，直到達到內嵌大小上限為止。此時文字會換行，輸入內容的區塊大小也會增加，以便符合新行。

<select>和<select multiple>

select 元素會縮小，以便配合所選選項。

具有 multiple 屬性的選取方塊會根據最寬的選項進行調整，並視需要調整高度，以便容納選項數量。

<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 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 這兩個值。