CSS辞書
UIレシピ集に戻る

入力に合わせて伸びるテキストエリア

フォーム対応が限定的

field-sizing: contentだけで、入力量に応じて高さが自動で伸びるテキストエリア。従来JSが必須だった挙動がCSS1行になりました。

プレビュー

Live

プレビュー枠は右下をドラッグすると高さを変えられます

コードを編集して試す

書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。

HTML
CSS

仕組みの解説

field-sizing: content は「フォーム部品のサイズを内容に合わせる」プロパティで、これまで scrollHeight を監視するJSで実装していた自動リサイズがCSSだけで済みます。最低・最大の高さは min-height / max-height で制御し、単位に lh(1行の高さ)を使うと「2行分〜10行分」と直感的に書けます。上限を超えた分は通常どおりスクロールします。

実装のポイント

未対応ブラウザでは普通のtextareaとして動くため、そのまま出しても壊れません(プログレッシブエンハンスメント)。対応状況はBaselineバッジを確認してください。

AIに依頼するときの文例

入力に合わせて高さが自動で伸びるテキストエリアを作ってください。JSではなくfield-sizing: contentを使い、min-height/max-heightをlh単位で指定、resize: noneで手動リサイズを無効化してください。

使っているプロパティ