Floating Label (浮动标签)
别称 Float label, Animated placeholder
输入框获得焦点或已有内容时,占位标签上移并缩小到输入框上方。
适用场景
表单、登录输入框
变体
- focus float
- not(:placeholder-shown)
别称 Float label, Animated placeholder
输入框获得焦点或已有内容时,占位标签上移并缩小到输入框上方。
表单、登录输入框
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“浮动标签”(Floating Label),也叫浮动标签(float label)或动画占位符(animated placeholder)。
输入框获得焦点或已有值时,原本在框内的标签平滑而快速地上移并缩小,停到输入框的上边缘;只有在输入框为空且失去焦点时才落回原处。
保持它是与输入框关联的真正 label,并确保输入框高度不变,让表单永远不会跳动。