CSS FORM SIZING

Field Sizing Playground

フォームのサイズを、固定値ではなく入力内容に合わせる。

CSS field-sizing
02

LIVE COMPARISON

同じ内容、違うサイズ

SAME CONTENT

TEXTAREAへ直接入力して比較できます

BEFORE

Fixed Sizing

field-sizing: fixed
RENDERED SIZE —
AFTER

Content Sizing

field-sizing: content
RENDERED SIZE —
CONTENT0文字
MIN88px
MAX220px
RESULTGROW
03

USE CASES

同じ指定が3つの標準UIに効く

CSS RECIPE

内容に合わせて伸ばす

FIXED SIZE内容が増えても外枠は一定
CONTENT SIZE内容を測り、制約内で伸縮
FALLBACK非対応でも標準サイズで使える