CSS Reference

field-sizing

入力コントロールのサイズを入力内容に合わせて変更する

field-sizing プロパティは、「デフォルトの優先サイズを持つ要素」に設定される固定サイズを上書きし、内容に合わせて変更するかを指定します。

デフォルトの優先サイズを持つ要素とは、その要素が含む内容に関係なく、ユーザーエージェントによって固定サイズが設定されている要素を指します。HTML における textarea 要素や input 要素などの入力コントロールは、このデフォルトの優先サイズを持つ要素に該当します。

field-sizing プロパティはこの固定サイズを上書きするかを指定します。つまり、field-sizing: content; とすることで、入力コントロールのサイズを、ユーザーエージェントが設定する固定サイズではなく、入力された内容に応じて変更するといったことが可能になります。

例えば、textarea 要素で実装された複数行の入力欄に対して、とても長い文章が入力されたとき、入力欄のサイズが固定だとスクロールが発生し、場合によってはユーザビリティが低下する可能性があります。そこで、field-sizing: content; とし、入力された内容（文章の量）に合わせて、サイズが可変するようにすると、ユーザビリティの向上につながる可能性があります。

また、この時 min-width / min-height プロパティや max-width / max-height プロパティなどを組み合わせることで、過度に入力コントロールのサイズが小さくなったり、逆にあるサイズ以上には大きくならないようにするといった制御も可能です。

指定できる値は下記の通りです。

fixed 要素に固定サイズを設定します。（既定値）
content 内容に合わせて要素のサイズを調整可能にします。

field-sizingの仕様

初期値
  • fixed
対象となる要素
  • デフォルトの優先サイズを持つ要素
継承
  • なし

field-sizingのサンプルソース

textarea {
  field-sizing: content;
  min-width: 10em;
  max-width: 100%;
  min-height: 5lh;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ×
Safari ×
iOS Safari ×
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome