はじめに
みなさんは、フォームのinputやtextareaで、入力した文字に合わせてサイズを自動で変えたいと思ったことはないでしょうか？
- 入力内容に応じて、
inputの幅を伸縮させたい -
textareaを入力量に応じて自動で高さ調整したい
そんなときに使えるのが、field-sizing というCSSプロパティです。
field-sizing は、Chrome 123 以降でサポートされ、CSSだけでフォーム要素のサイズを入力内容に合わせて動的に変更できるようになりました。
そのため、この記事では、field-sizing について紹介します。
field-sizing とは？
field-sizing は、フォーム要素（<input>や<textarea>など）のサイズを、入力内容やプレースホルダーの内容に基づいて調整できるプロパティです。
input {
field-sizing: content;
}
field-sizingには以下の2つの値があります。
-
fixed：デフォルトの挙動。要素の幅・高さは固定。入力内容に関係なし -
content：入力内容やプレースホルダーに合わせて、幅や高さを自動調整
See the Pen Untitled by degudegu2510 | Qiita (@degudegu2510) on CodePen.
まとめ
この記事では、入力内容に応じてフォームサイズを自動調整できる新しいCSSプロパティfield-sizingを紹介しました。
これからのフォームデザインに、ぜひ取り入れてみてください！
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。