FORM & INPUT
浮动标签输入Floating Label Input
标签一开始待在占位符的位置，聚焦或输入后缩着升到边框上，一个元素干两个活。
效果预览
适合用在哪
登录注册、设置表单、需要紧凑排版的任何输入场景。
容易踩的坑
- 浏览器自动填充时 :placeholder-shown 不触发，标签与已填内容重叠。
- 缩小后的标签只有 10px 且为浅灰，对比度不足 4.5:1，难以辨认字段含义。
- 用 font-size 而非 transform 做缩放动画，每帧触发重排导致文字闪烁。
设计提示词 · Prompt
浮动标签输入（Floating Label Input）：input 的 placeholder 设为空格（用于 :placeholder-shown 判断），label 绝对定位在输入框内部（16px、灰色）。聚焦或有值时（input:focus + label 或 input:not(:placeholder-shown) + label）label 缩小到 10-11px、上移到边框线上（top:负值或 4px）、变品牌色，同时 input 的 padding-top 预留标签空间。缩放动画用 transform + 180ms cubic-bezier(.32,.72,0,1)，不要用 font-size 直接跳变（会闪）。纯 CSS 可实现，无需 JS。
Floating Label Input: set the input's placeholder to a single space (used for :placeholder-shown detection); the label is absolutely positioned inside the input (16px, gray). When focused or filled (input:focus + label or input:not(:placeholder-shown) + label), the label shrinks to 10-11px, moves up onto the border line (top: negative value or 4px) and turns brand color, while the input's padding-top reserves space for the label. Animate the scale with transform + 180ms cubic-bezier(.32,.72,0,1); don't jump font-size directly (it flickers). Achievable in pure CSS, no JS required.
常见搭配
同一页面里经常和「浮动标签输入」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-fl"> <input placeholder=" " value="hello@nova.dev"> <label>邮箱地址</label> </div>