k8o

← Playgrounds一覧に戻る
CSSデモ1

field-sizing

field-sizing: contentでフォームコントロールを入力内容に合わせて伸縮させられます。

field-sizing: contentの挙動

contentとfixedを切り替えて、input・textarea・selectの伸縮を比較できます。空のinputはプレースホルダー幅になります。

値を切り替えると、下のコントロールに反映されます。

プレビューfield-sizing: content

各コントロールには min-width を設定しているため、縮んでもその幅で止まります。テキストエリアには rows も指定していますが、content では無視され、高さは内容に追従し、max-height に達するとスクロールします。