直接用 input:focus { box-shadow: 0 0 8px rgba(66, 153, 225, 0.6); } 即可实现柔和外发光,需避免纯色不透明、父容器 overflow: hidden 裁剪、或重置 appearance 导致失效,并注意 Safari 渲染锯齿与暗色主题下透明度适配。

focus 时用 box-shadow 实现外发光效果
直接给 input 或 textarea 元素加 :focus 伪类 + box-shadow 就能实现,不需要 JS。关键不是“发光”,而是阴影的模糊半径和颜色透明度要调对。
-
box-shadow: 0 0 8px rgba(66, 153, 225, 0.6)是常用起手值:水平/垂直偏移为 0,模糊半径 8px,蓝色带一定透明度 - 避免写成
box-shadow: 0 0 8px #4299e1—— 纯色不透明会导致光晕生硬,视觉上像“描边”而非“发光” - 如果表单用了
outline: none,务必保留box-shadow,否则键盘 Tab 导航时会完全失去焦点提示
为什么 input:focus 不生效?检查这三处
常见失效不是 CSS 写错,而是被其他规则覆盖或条件不满足。
- 是否写了
input:focus却忘了加浏览器前缀?现代浏览器已无需-webkit-focus-ring-color,但旧项目里可能残留干扰样式 - 是否在父容器上用了
overflow: hidden?box-shadow会被裁掉,导致“发光消失”——改用overflow: visible或给父元素留点 padding - 是否用了
appearance: none或重置了所有边框?确保没连带把outline和box-shadow一起重置掉
兼容性与性能注意点
box-shadow 在所有现代浏览器中表现一致,但有两个实际影响容易被忽略:
- 在 Safari 上,如果同时设置了
border-radius和大模糊值(如 >20px),可能出现轻微渲染锯齿,建议模糊值控制在 12px 以内 - 不要对大量表单项(比如表格里上百个
input)统一加高成本阴影,box-shadow: 0 0 20px rgba(0,0,0,0.2)比0 0 4px rgba(0,0,0,0.1)绘制开销明显更高 - 暗色主题下,别只换阴影颜色而不调整透明度——
rgba(255, 255, 255, 0.3)在黑底上比在白底上更显眼,需单独测试
移动端 focus 发光触发异常怎么办
iOS Safari 默认会给聚焦的 input 加一层半透明灰色背景,会盖住你的发光效果;Android Chrome 则可能因快速失焦导致阴影闪一下。
立即学习“前端免费学习笔记(深入)”;
- 加
-webkit-appearance: none可去除 iOS 默认聚焦样式,但必须同步补全border和background,否则输入框“消失” - 安卓端如果点击后立刻失焦(比如表单自动提交),发光几乎看不到——这时不如改用
:active配合短时 transition 模拟按下反馈 - 真机调试时用 Safari 开发者工具远程检查
:focus是否被触发,别只信桌面模拟器



















