k8o

はじめに

inputやtextareaは、入力内容の量に関わらず最初に決めた幅や高さのまま表示されます。テキストエリアを入力に合わせて伸ばしたいときは、scrollHeightを読んでheightを書き換えるようなJavaScriptをよく書いてきました。

field-sizingプロパティを使うと、こうしたフォームコントロールのサイズを入力内容にフィットさせる挙動をCSSだけで指定できます。Chromeでは先行して使えていましたが、Safari 26.2とFirefox 152が対応したことでBaseline 2026に加わりました。

field-sizingの値

field-sizingが取る値はfixedとcontentの2つです。

input {
  field-sizing: fixed;
既定値。最初に決まったサイズで固定される
}

input {
  field-sizing: content;
入力内容に合わせてサイズが変わる
}

fixedが既定値で、これは従来どおりの挙動です。contentを指定すると、コントロールが内容を包み込むように縮み、テキストが増えると広がります。

対象となる要素

field-sizingが効くのは、内容に関わらず既定の推奨サイズを持つ要素です。HTMLでは次のフォームコントロールが対象です。

• text・email・search・tel・url・password・numberといった、テキストを直接入力するinput
• fileのinput（選択したファイル名に合わせて幅が変わる）
• textarea
• select

textareaは単一行のテキスト入力に近い挙動になり、幅の制約に達すると今度は高さ方向に行が増え、高さの制約にも達するとスクロールバーが出ます。selectはドロップダウンなら選択中の選択肢の幅にフィットし、multiple属性付きのリストボックスならスクロールせずに全選択肢が見える高さになります。

min/maxと組み合わせる

field-sizing: contentだけを指定すると、inputは最小でテキストカーソルの幅まで縮みます。実用上はmin-widthやmax-widthを添えて、伸び縮みの範囲を決めておくのが扱いやすいです。

input {
  field-sizing: content;
  min-width: 8rem;
  max-width: 20rem;
}

範囲を制限する用途にはmin-widthやmax-widthが向いています。一方でwidthやheightを固定値で指定すると、サイズがその値に固定され、field-sizing: contentは効かなくなります。placeholderを指定したinputは、フォーカス前はプレースホルダー全体が見える幅で描画され、入力を始めるとmin-widthまで縮みます。

固定値のwidth以外に、レイアウト側でコントロールが幅いっぱいに引き伸ばされる場合も、内容に合わせて縮みません。たとえばflex-direction: columnのFlexアイテムやGridアイテムは、既定でコンテナの幅まで広がります。引き伸ばしを止めればfield-sizing: contentが効きます。コントロール側で指定するなら、align-self（Flex）やjustify-self（Grid）をstartにするといった方法があります。

属性との関係

field-sizing: contentを指定すると、サイズに関わる一部の属性は意味を持たなくなります。inputのsize、textareaのrows・colsはいずれも既定の推奨サイズを決める属性なので、サイズが内容に追従するcontentでは効きません。

伸びる上限を内容側から決めたいときはmaxlengthが使えます。文字数の上限に達するとコントロールはそれ以上大きくなりません。

<input type="tel" maxlength="15" />

デモ

field-sizingをcontentとfixedに切り替えながら、各コントロールに入力してサイズの変化を確かめられます。テキストエリアは行を増やすと高さが伸び、セレクトボックスは選んだ選択肢に幅が合います。

おわりに

field-sizing: contentは、フォームコントロールのサイズを入力内容に追従させるためのCSSプロパティです。Baseline 2026で主要ブラウザに揃ったので、テキストエリアの高さをJavaScriptで調整していた処理を、field-sizingとmin-width・max-widthの組み合わせに置き換えていけます。