ユーザー操作

field-sizing

field-sizing は、入力欄やテキストエリアの大きさを、中の文字に合わせて伸び縮みさせるかを指定します。content にすると、打った文字の分だけ広がります。

構文

fixed | content

お名前

プリセット

右下の角をドラッグするとサイズを変えられます

.box > :nth-child(2) {
  field-sizing: content;
}

field-sizingcontent

fixedcontent

お名前

fixed：初期値です。中の文字数に関係なく、ブラウザが決めた大きさになります。input の size 属性や、textarea の rows・cols 属性で大きさを変えられます。
content：中の文字に合わせた大きさになります。input は打った文字の幅に、textarea は一番長い行の幅と行数に合わせた大きさになります。

プレビューでは、見出しの下の入力欄（2 番目の子）に書いています。content では名前の幅まで縮み、文字を打ったり消したりすると幅が変わります。fixed では、文字数に関係なく同じ幅です。入力欄には max-width: 100% も書いてあり、箱の幅より広がりません。

チャットやコメントの textarea を、書いた行数に合わせて高さが伸びるようにするときに使います。これまで JavaScript で高さを計算していた処理が、CSS だけで書けます。

空にすると、文字を打つ位置の印の分しか幅が無くなり、ほとんど見えなくなります。min-width で最小の幅を、max-width で広がりすぎない上限を決めておきます。
空で placeholder があるときは、プレースホルダーの文字の幅になります。
width や height を書くと、そちらが優先されます。textarea に width を書いておくと、幅は変わらず、折り返した行数に合わせて高さだけが伸びます。
content のときは、size・rows・cols 属性は大きさに効きません。
Chrome では、select に書くと選んでいる選択肢の幅になります。
Chrome・Edge 123、Firefox 152、Safari 26.2 から使えます。それより古いブラウザでは書いていないのと同じで、決まった大きさのままです。