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

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

Adam Argyle

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

field-sizing では、 説明します。このコンテンツ ベースのサイズ設定スタイルは、テキスト領域以外でも有効です。

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

クイックリンク

仕様 | 説明

ショート動画が好き？

Wes Bos、 Jhey のそれぞれが Twitter で field-sizing を紹介する動画を公開しました。

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

こちらが <form> 要素 field-sizing の機能と、それぞれに対する影響の概要を示します。

<textarea>

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

ユーザーが入力を始めると、入力がインライン方向に増えていき、 最大インライン サイズ。このサイズでテキストが折り返される位置と、 入力が新しい行に合わせて増加します。

<select>、nd <select multiple>

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

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 を使用するには、追加の作業を行う必要があります。アフマド 網掛けは「防御的」と呼んでいます。 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 です。指定できるのは 2 つの値のみです。 fixed または content の値。