Limited support Firefox 未対応のため、JSフォールバックとの併用が必要。
インタラクション Limited support

field-sizing

field-sizing: content を指定すると、textarea や input の幅・高さが入力内容に応じて自動的に変化する。従来はJSでスクロール高さを計測してリサイズする必要があったが、CSSだけで自動リサイズが実現できる。特に textarea の自動高さ調整に有用。

フォームサイジング

概要

field-sizing: content を指定すると、textarea や input の幅・高さが入力内容に応じて自動的に変化する。従来はJSでスクロール高さを計測してリサイズする必要があったが、CSSだけで自動リサイズが実現できる。特に textarea の自動高さ調整に有用。

対応ブラウザ

デスクトップ

Chrome 123+
Edge 123+
Safari 26.2+
Firefox 未対応

モバイル

Chrome Android 123+
Safari iOS 26.2+
Firefox Android 未対応

基本構文

CSS 
textarea {
  field-sizing: content;
  min-height: 3lh;
  max-height: 10lh;
}

input {
  field-sizing: content;
  min-width: 10ch;
}

実務での使いどころ

  • 自動リサイズ textarea

    チャット入力欄やコメント欄で、入力行数に応じて textarea の高さが自動で広がる。

  • コンテンツ幅の input

    タグ入力やインライン編集で、入力テキストの長さに合わせて input 幅が変化する。

注意点

  • Firefox が未対応。JSによるフォールバックを併用すること。
  • min-height / max-height を設定しないと、コンテンツ量によって極端にサイズが変化する。

フォールバック戦略

CSS 
@supports not (field-sizing: content) {
  textarea {
    resize: vertical;
    min-height: 80px;
  }
}

アクセシビリティ

  • 自動リサイズにより入力領域が見えなくなることがないよう、min-height を適切に設定する。

参考リンク