フォーカスまたは入力済みのときにラベルが小さく上へ移動する入力欄。placeholderと:placeholder-shownを使いJSなしで実現します。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
鍵は placeholder=" "（半角スペース）です。:placeholder-shown は「プレースホルダが見えている＝未入力」のときに一致する擬似クラスなので、input:not(:placeholder-shown) で「入力済み」を表せます。これとフォーカス時（input:focus + label）の2条件でラベルを transform で縮小移動します。ラベルは本物の label 要素なので、クリックでの入力欄フォーカスや支援技術との関連付けはそのまま機能します。
transformで動かしているのはレイアウト再計算を避けるためです。font-sizeやtopを直接アニメーションさせるとカクつくことがあります。
JSを使わないフローティングラベル入力欄を作ってください。placeholder=" "と:placeholder-shownで入力済みを判定し、フォーカス時と入力済み時にlabelをtransformで左上に縮小移動させてください。