浮动标签

标签默认位于输入框内部，聚焦或输入内容时平滑上浮到顶部，是经典的 Material Design 表单交互模式。

实时预览

用户名

邮箱地址

代码

css

.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-group input {
  width: 100%;
  padding: 20px 16px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s ease;
}

.form-group input:focus {
  border-color: #667eea;
}

.form-group label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 15px;
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
  top: 10px;
  transform: translateY(0);
  font-size: 11px;
  color: #667eea;
}

html

<div class="form-group">
  <input type="text" placeholder=" " />
  <label>用户名</label>
</div>

纯 CSS 实现的浮动标签表单动画效果——通过伪类选择器（:focus、:checked）和过渡动画让表单元素具有交互反馈。无需 JS 即可实现聚焦发光、开关切换、浮动标签等效果。

快速使用

复制 CSS 代码到你的样式文件中
将 HTML 表单结构粘贴到页面中（注意 checkbox/radio 的 id-label 对应关系）
调整颜色和尺寸以匹配你的表单设计
配合 :valid/:invalid 伪类添加表单校验的视觉反馈

使用场景

登录/注册表单：聚焦发光效果让用户知道当前正在输入的字段
设置页面：开关切换和复选框动画让配置操作更直观
搜索框：下划线增长或聚焦扩展动画引导用户输入
错误提示：抖动动画+红色边框给校验失败的字段明确反馈

常见问题

Q: 纯 CSS 表单动画需要 JS 做校验吗？ A: CSS 负责视觉反馈，JS 负责逻辑校验。推荐配合使用：CSS 处理 :valid / :invalid 伪类的样式变化和过渡动画，JS 负责自定义校验规则和提交拦截。

Q: 浮动标签的兼容性如何？ A: :placeholder-shown 伪类 IE 不支持，但所有现代浏览器都支持。IE 降级方案：让标签始终在输入框上方，放弃浮动动画。或使用 :focus-within（同样不支持 IE）。

Q: 开关切换和复选框动画支持键盘操作吗？ A: 用 <label> 包裹的 checkbox/toggle 天然支持键盘操作（Tab 聚焦 + Space 切换）。配合 :focus-visible 伪类添加焦点环样式，满足无障碍要求。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持
Firefox	✅ 完全支持
Safari	✅ 完全支持
移动端浏览器	✅ 完全支持
IE 11	⚠️ `:focus-within` / `:placeholder-shown` 不支持

使用说明

属性	说明
`:not(:placeholder-shown)`	当输入框有内容时触发标签上浮（需空 placeholder）
`top` + `transform`	标签从居中位置滑动到顶部
`font-size`	从 15px 缩小到 11px
`pointer-events: none`	防止标签阻挡输入框点击
`transition: all`	所有属性同步过渡

提示： placeholder=" " 中的空格是关键，让 :placeholder-shown 伪类生效。标签颜色与边框颜色联动变化，增强交互一致性。

浮动标签 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐