如何通过纯 CSS 实现输入框标签的聚焦上浮动画

本文介绍一种无需 javascript 的纯 css 方案，通过 :focus 和 :not(:placeholder-shown) 伪类联动 ~ 选择器，实现表单标签平滑上移、缩放的浮动效果，兼顾语义性、可访问性与性能。

本文介绍一种无需 javascript 的纯 css 方案，通过 :focus 和 :not(:placeholder-shown) 伪类联动 ~ 选择器，实现表单标签平滑上移、缩放的浮动效果，兼顾语义性、可访问性与性能。

在现代表单设计中，“浮动标签（Floating Label）”是一种广受认可的 UX 模式：标签默认位于输入框内部或下方，当用户聚焦或输入内容后，标签优雅上浮并缩小，为输入内容腾出空间，同时保持字段含义清晰可见。你当前尝试用 JavaScript 切换动画类的方式逻辑正确，但存在两个关键问题导致失效：

1. CSS 类名误加点号：classList.add(".username-focus-label-animation") 中的 ".xxx" 是选择器写法，而 classList API 接收的是纯类名字符串（不带 .）。应改为 add("username-focus-label-animation")；
2. 动画触发时机与状态耦合不足：仅靠 click 事件无法覆盖所有聚焦场景（如 Tab 键切换），且未监听输入内容变化；更严重的是，.username-focus-label-animation 一旦执行完毕，其 transform 值被 forwards 固定，后续再添加 .username-blur-label-animation 时，因起始状态不是 translate(0, 0.1rem)，动画将无法正确反向播放。

推荐采用纯 CSS 驱动方案——它更轻量、更可靠、天然支持键盘导航与屏幕阅读器，并避免 JS 状态管理复杂度。

✅ 正确实现方式：结构 + CSS 伪类联动

核心思路是将 <label> 包裹 <input>，利用相邻兄弟选择器 ~ 和状态伪类控制 <span> 标签的变换：

<label>  <input type="text" name="username" placeholder="">  <span>Username</span></label>

对应关键 CSS（已适配你的设计风格）：

立即学习“前端免费学习笔记（深入）”；

.login-container label {  position: relative;  display: block;}.login-container label span {  position: absolute;  left: 0.5rem;  top: 0.5rem;  transform-origin: left center;  transition: transform 0.3s ease, scale 0.3s ease, color 0.2s;  color: #ddd;  font-size: 1rem;  pointer-events: none; /* 防止遮挡输入 */}/* 当输入框获得焦点，或已有内容（非空占位符）时，标签上浮缩小 */.login-container input:focus ~ span,.login-container input:not(:placeholder-shown) ~ span {  transform: translate(0, -1.3rem) scale(0.8);  color: #0bf; /* 可选：聚焦时变色强化反馈 */}/* 输入框获得焦点时，底部边框高亮 */.login-container input:focus {  outline: none;  border-bottom-color: #0bf;}/* 输入无效时（如 email 格式错误）提供视觉提示 */.login-container input:invalid:not(:placeholder-shown) ~ span {  color: #f00;}

? 为什么 :not(:placeholder-shown) 更优？
它能精准检测用户是否已输入内容（即使失去焦点），比单纯依赖 :focus 更符合“浮动即有值”的交互直觉，且完全免去 JS 状态维护。

⚠️ 注意事项与增强建议

• 可访问性保障：确保 <input> 具有 name 和语义化 type（如 type="email"），<span> 作为视觉标签，不可替代 <label> 的 for/id 关联。若需严格语义，可保留传统 <label for="id"> 并用 aria-hidden="true" 隐藏浮动 <span>，但本例中嵌套结构本身已满足基础可访问性。
• 字体与动画微调：你使用的 Urbanist 字体需确保已正确引入；动画时长 0.3s 可根据品牌动效规范调整为 0.25s 或 0.35s，避免过快（难感知）或过慢（显拖沓）。
• 响应式适配：在小屏设备上，top/translateY 数值建议用 rem 或 em 单位，便于随根字体缩放统一调整。

✅ 总结

放弃手动切换 class 的 JS 动画逻辑，转而采用 :focus + :not(:placeholder-shown) + ~ 相邻选择器的纯 CSS 浮动标签方案，不仅能彻底解决你当前的动画失效问题，还能提升代码健壮性、可维护性与无障碍体验。它轻量、声明式、零运行时开销，是现代表单动效的最佳实践之一。