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

編集可能なコンテンツを含む要素の自動サイズ設定を行う 1 行のコード。

Adam Argyle

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

field-sizing を使用する場合、コンテンツに基づくサイズ設定を有効にするには 1 行の CSS が必要です。このコンテンツベースのサイズ設定スタイルは、textarea 以外にも使用できます。

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

クイックリンク

仕様 | 説明

ショート動画が好きですか？

Wes Bos と Jhey が、それぞれ Twitter で field-sizing を紹介する素晴らしい動画を公開しています。

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

以下に、field-sizing が動作する <form> 要素と、各要素に与える影響の概要を示します。

<textarea>

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

ユーザーが入力すると、入力はインライン方向に最大インライン サイズに達するまで拡大します。この時点でテキストが折り返され、入力のブロックサイズが新しい行に収まるように拡大します。

<select>、nd <select multiple>

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

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

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

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

ユーザーが入力すると、入力は max-inline-size に達するまでインライン方向に拡大します。この時点で、オーバーフローが入力値をクリップします。

<input type="file">

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

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

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

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

詳細

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

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

field-sizing を使用すると、追加の作業が必要になります。Ahmad Shadeed はこれを「防御的な 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 のデフォルト値は何ですか？

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