azukiazusa.dev
戻る
azukiazusa

azukiazusa

大きさが自動で変わる textarea を CSS だけで実現

テキストの入力量に応じて自動で高さが変わる textarea をよく見かけると思います。Slack や X の入力欄がそうですね。

azukiazusa

azukiazusa

これは昔から JavaScript を使って実装されていました。これを CSS のみで実現する form-sizing という提案があります。

azukiazusa

azukiazusa

使い方は CSS で form-sizing: content を指定するだけです。

textarea {
  form-sizing: content;
  min-height: 2lh; // lh は行の高さ
  max-height: 10lh;
}