フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更

CSSはどんどん便利になっていますね！
これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。

CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテクニックを紹介します。

フォームのテキストエリアに使用するCSSのテクニックは、2つあります。

1. field-sizing: content;で、コンテンツに合わせてテキストエリアを自動的にサイズ変更する。
2. lh単位で、テキストエリアの高さを行の高さで設定する。

HTMLは、textareaを用意するだけです。

CSSは、下記の通り。
field-sizing: content;でテキストエリアを自動的にサイズ変更し、min-height: 3lh;で行の高さで高さを設定します。

field-sizing: content;を使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、サイズが自動で拡張されるテキストエリアを簡単に実装できます。

また、min-heightやmax-heightを設定することで、下限上限のサイズも設定できます。その際にlh単位で設定すると、便利です。

CSSのfield-sizing: content;について詳しくは、下記をご覧ください。

CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
※画像は、max-heightを4行分にしたものです。

CSSのlh単位について詳しくは、下記をご覧ください。

フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説

実際の動作は、下記でご覧ください。
1つ目は、テキストを複数行記述してもテキストエリアの高さは変わらず、3行目以降を入力すると最初の行が表示されなくなります。

2つ目は、field-sizing: content;を設定してあるので、複数行を入力するとそれに合わせて自動的に高さが変更されます。

3つ目は、min-height: 3lh;を設定してあるので、少ない行でも3行分の高さで表示されます。

4つ目は、max-height: 3lh;で、たくさん入力しても3行分を超えることはありません。

See the Pen
textareas field-sizing: content; by coliss (@coliss)
on CodePen.

元ネタは、下記ポストより。

2 CSS tips for textareas:

1️⃣ Use field-sizing: content to make the textarea auto-resize to its content

2️⃣ Use lh units to set the height in the font's computed line-height units pic.twitter.com/gdR0meDAmJ

— StackBlitz (@stackblitz) August 5, 2024