Appearance
发光输入框
聚焦发光效果
实时预览
代码
css
.glow-input{width:280px;padding:12px 16px;background:transparent;border:2px solid #333;border-radius:8px;color:#fff;font-size:14px;outline:none;transition:all .3s}
.glow-input:focus{border-color:#667eea;box-shadow:0 0 15px #667eea44}纯 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 不支持 |