CSS のフィールド サイズ設定

編集可能なコンテンツを含む要素の自動サイズ調整のための 1 行のコード。

field-sizing を使用せずに適切なサイズの入力フィールドを作成するには、テキスト フィールドの入力の平均サイズを推測するか、JavaScript を使用して文字数をカウントし、ユーザーが入力したテキストに合わせて要素の高さまたは幅を増やす必要がありました。つまり、ユーザーが入力したコンテンツをたどろうとすると、簡単ではなく、エラーが発生しやすくなっていました。

field-sizing では、コンテンツに基づくサイズ設定を有効にするために 1 行の CSS が必要です。このコンテンツ ベースのサイズ設定スタイルは、テキスト領域以外でも有効です。

textarea, select, input {
  field-sizing: content;
}

対応ブラウザ

  • 123
  • 123
  • x
  • x

仕様 | 説明

ショート動画が好き?

Wes BosJhey がそれぞれ field-sizing を紹介する素晴らしい動画を Twitter に投稿しています。

フィールド サイズの影響を受ける要素

以下に、field-sizing が機能する <form> 要素のリストと、各要素への影響を示します。

<textarea>

入力は、min-inline-size またはプレースホルダに収まるように縮小されます。

ユーザーが入力を始めると、入力がインライン方向に大きくなり、最大インライン サイズに達すると、テキストが折り返され、新しい行に合わせて入力のブロックサイズが拡大します。

<select><select multiple>

選択要素は、選択したオプションに合わせて縮小されます。

multiple 属性を持つ選択は、最も幅の広いオプションに合わせて拡大され、オプションの数に合わせて必要な高さになります。

<input type="text"><input type="email"><input type="number">

入力は、min-inline-size またはプレースホルダに収まるように縮小されます。

ユーザーが入力すると、入力値がインライン方向に大きくなり、max-inline-size に達すると、オーバーフローにより入力値がクリップされます。

<input type="file">

入力が折りたたみ、ボタンと事前入力されたファイル名のテキストが表示されます。

ファイルをアップロードすると、入力はボタンとファイル名のテキストと同じ幅になります。

結果の確認、テスト、比較

以下に、field-sizing の影響を受ける各フォーム要素の before と After の動作を示す、インタラクティブな最小限の例を示します。

Codepen で試す

もっと近くで見る

[placeholder] を使用する場合は、プレースホルダがコンテンツになります。すでに説明しましたが、ここではフォームのスタイル設定時に知っておくことが重要です。長いプレースホルダまたは短いプレースホルダは、field-sizing: content を使用して入力の本質的なサイズを変更します。

Codepen で試す

空でオーバーフローするスタイルの処理

field-sizing を使用するには、追加の作業を行う必要があります。Ahmad Shaadeed はこれを「防御 CSS」と呼んでいます。ここでの目標は、望ましくない視覚的状態からそれを守ることよりも、何かの動作や外観を正確に記述することが必ずしも目的ではありません。以前は入力サイズがかなり固定されていましたが、field-sizing: content を適用すると、入力が小さすぎる、または大きすぎる可能性があります。

出発点としておすすめのスタイルは以下のとおりです。要素が縮小しすぎないようにするとともに、textarea の場合に要素が縮小しすぎないようにします。

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

この CSS ではサイズ設定に相対単位を使用しています。新しい lh ユニットはブロックサイズに最適で、ch はインライン サイズに最適です。

フィールドサイズのデフォルト値はどれですか。

field-sizing のデフォルト値は fixed で、fixed または content の 2 つの値のみを受け入れます。