CSS 欄位大小

一行程式碼即可自動調整元素大小，並編輯內容。

Adam Argyle

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

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

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

快速連結

規格 | 說明影片

喜歡短片嗎？

Wes Bos 和 Jhey 各自發布了一段很棒的 Twitter 影片，向你介紹 field-sizing。

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

以下列出 <form> 元素，以及 field-sizing 對每個元素產生的影響摘要。

<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 的預設值為 fixed，且只接受 fixed 或 content 這兩個值。