CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
Post on:2023年10月10日
sponsors
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。
下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。
CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。
参考: Feature: field-sizing CSS property
CSSは、下記の通りです。
|
1 2 3 |
textarea { field-sizing: content; } |
field-sizingは、Chrome 120（11月リリース予定）で実装される新しいプロパティです。10月現在、Chrome Canary 120でその動作を確認できます。
ということで、Chrome Canary 120でデモページを表示したものをGIFアニメーションにしました。textareaに文字を入力すると、それに合わせてサイズが自動で拡張されます。
デモページ: Chrome Canary 120で表示
サイズはmin-heightやmax-heightを設定すると、上限下限のサイズを設定できます。下記は、max-heightを4行分にしたものです。
デモページ: Chrome Canary 120で表示
CSSは、下記の通り。
※lhは、行の高さを1lhと設定した相対単位です。
|
1 2 3 4 |
textarea { field-sizing: content; max-height: 4lh; } |
ちなみに、field-sizingに非対応のブラウザChrome 117で表示すると、サイズの変化はありません。
デモページ: Chrome 117で表示
実際の動作は、デモページでご覧ください。
※Chrome Canary 120+でご覧ください。
See the Pen
Auto-resizing text input with field-sizing: content [Chrome 120] by coliss (@coliss)
on CodePen.
元ネタは下記ポストより。
Future CSS Tip! 🚀
You can create auto-resizing text inputs with one line of CSS 🤯
textarea {
form-sizing: content; 👈 That's it!
}The size of your input will grow to fit your content. If you want to constrain the size, do something like this:
textarea {
form-sizing:… pic.twitter.com/JQGuFVhdJF— jhey ▲🐻🎈 (@jh3yy) October 6, 2023
sponsors
