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

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

Adam Argyle

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

field-sizing を使用すると、コンテンツに基づいてサイズ設定を有効にするために必要な CSS は 1 行だけです。このコンテンツ ベースのサイズ設定スタイルは、textarea 以外にも使用できます。

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

Browser Support

• 123
• 123
• x
• 26.2

Source

クイックリンク

仕様 | 説明

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

Wes Bos と Jhey は、Twitter で field-sizing を紹介する優れた動画を公開しています。

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

以下は、field-sizing が動作する <form> 要素と、それぞれの要素に与える影響の概要の一覧です。

<textarea>

入力は min-inline-size に折りたたまれるか、プレースホルダに合わせて調整されます。

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

<select>、<select multiple>

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

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

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

入力は min-inline-size に折りたたまれるか、プレースホルダに合わせて調整されます。

ユーザーが入力すると、入力はインライン方向に拡大し、max-inline-size に達すると、オーバーフローによって入力値が切り取られます。

<input type="file">

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

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

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

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

Codepen で試す

詳細

[placeholder] を使用すると、プレースホルダがコンテンツになります。これは以前にも説明しましたが、フォームのスタイルを設定する際に重要となるため、ここで改めて説明します。長いプレースホルダまたは短いプレースホルダは、field-sizing: content を含む入力の固有サイズを変更します。

Codepen で試す

空のスタイルとオーバーフロー スタイルの処理

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