field-sizing
field-sizing は CSS のプロパティで、フォームコントロール要素のような、既定の推奨サイズが指定された要素のサイズ設定を制御することができます。このプロパティを使用すると、既定のサイズ設定を上書きすることができ、あるフォームコントロールがそのコンテンツに合わせてサイズを調整できるようになります。
このプロパティは通常、テキスト <input> や <textarea> 要素のスタイル設定に使用され、フォームコントロールにテキストが入力されたときに、コンテンツを縮小したり、大きくしたりすることができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 123 | 123 | | 26.2 | 123 | 26.2 | |
content | 123 | 123 | | 26.2 | 123 | 26.2 |
fixed | 123 | 123 | | 26.2 | 123 | 26.2 |
基本構文
CSS
textarea {
field-sizing: content;
min-height: 3lh;
max-height: 10lh;
}
input {
field-sizing: content;
min-width: 10ch;
}ライブデモ
実務での使いどころ
-
自動リサイズ textarea
チャット入力欄やコメント欄で、入力行数に応じて textarea の高さが自動で広がる。
-
コンテンツ幅の input
タグ入力やインライン編集で、入力テキストの長さに合わせて input 幅が変化する。
注意点
- Firefox が未対応。JSによるフォールバックを併用すること。
- min-height / max-height を設定しないと、コンテンツ量によって極端にサイズが変化する。
フォールバック戦略
CSS
@supports not (field-sizing: content) {
textarea {
resize: vertical;
min-height: 80px;
}
}アクセシビリティ
- 自動リサイズにより入力領域が見えなくなることがないよう、min-height を適切に設定する。