CSS 欄位大小

只要一行程式碼，就能自動調整可編輯內容元素的大小。

Adam Argyle

如果沒有 field-sizing，如要建立大小合適的輸入欄位，您必須猜測文字欄位輸入的平均大小，或使用 JavaScript 計算字元，並在使用者輸入文字時增加元素高度或寬度。換句話說，這並不容易，而且在嘗試追蹤使用者輸入的內容時，很容易出錯。

使用 field-sizing 時，您只需要一行 CSS 即可根據內容啟用大小調整功能。這種根據內容調整大小的樣式，也適用於文字區域以外的元素！

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

快速連結

規格 | 說明

喜歡短篇影片嗎？

Wes Bos 和 Jhey 分別在 Twitter 上發布了精彩影片，介紹 field-sizing。

哪些元素會受到 field-sizing 影響？

以下列出 field-sizing 作用的 <form> 元素清單，並摘要說明對各元素的效果。

<textarea>

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

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

<select>和<select multiple>

選取元素會縮小，以符合所選選項。

具有 multiple 屬性的選取元素會放大，以容納最寬的選項，並根據選項數量調整高度。

<input type="text">、<input type="email">和<input type="number">

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

使用者輸入內容時，輸入內容會沿著內嵌方向增加，直到達到 max-inline-size 為止，此時溢位會裁剪輸入值。

<input type="file">

輸入欄位會收合為按鈕和預填的檔案名稱文字。

上傳檔案後，輸入欄位的寬度會變成按鈕加上檔案名稱文字的寬度。

查看、測試及比較結果

以下是互動式範例，展示 field-sizing 對各表單元素前後行為的影響。

在 Codepen 上試用

正在仔細查看

使用 [placeholder] 時，預留位置會變成內容。雖然先前已提過，但這裡還是要特別說明，因為這在設定表單樣式時很重要。長或短的預留位置會變更 field-sizing: content 輸入內容的固有大小。

在 Codepen 試用

空白和溢位樣式處理

使用 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 的預設值為何？

field-sizing 的預設值為 fixed，且僅接受 fixed 或 content 這兩個值。