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>、<select multiple>

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

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

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

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

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

<input type="file">

入力はボタンと事前入力されたファイル名のテキストにまで縮小されます。

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

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

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

詳細

[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 つの値のみを受け入れます。