移动端搜索框:focus光晕失效主因是Safari的:focus触发逻辑、box-shadow渲染策略及触摸交互适配问题；需用:focus-visible替代:focus，控制box-shadow参数并加transition，Tailwind中注意ring圆角陷阱。
移动端搜索框:focus光晕容易失效或卡顿，核心问题不在写法本身，而在 Safari 的:focus触发逻辑、box-shadow渲染策略和触摸交互适配——直接套用桌面端代码大概率白忙。
为什么移动端 input:focus 光晕经常不出现？
iOS Safari 在点击输入框后常不触发:focus（尤其配合软键盘弹出时），不是 CSS 写错了，而是浏览器行为差异。它更倾向把焦点状态留给键盘导航场景，触屏点击默认不激活:focus伪类。
- 用开发者工具检查元素，
:focus样式被划掉？大概率是选择器权重不够，或被框架（如 Bootstrap）的更高优先级规则覆盖 - 真机测试时加一句
input:focus { outline: red solid 2px; }，如果红框也不出现，说明根本没进:focus状态 - 安卓 WebView 或部分定制浏览器可能禁用了:focus，需靠
tabindex="0"强制可聚焦
:focus-visible 是更稳妥的替代方案
用 :focus-visible 替代 :focus 能准确区分“键盘/辅助技术聚焦”与“鼠标/触屏点击”，既避免触屏误触发，又保留可访问性语义。iOS 15.4+ 和主流安卓浏览器均已支持。
- 回退写法必须带
:focus：写成input:focus, input:focus-visible，否则旧版 Safari 完全没效果 - 别单独只用
:focus-visible—— 触屏用户点一下就失焦，光晕闪一下就消失，体验断层 - 不要依赖
-webkit-focus-ring-color做兜底，它只是 outline 颜色变量，无法控制 box-shadow
box-shadow 参数要为移动端“减负”
模糊值超过 20px 在低端 Android 上会明显掉帧，而 iOS Safari 对大模糊渲染偏保守，容易发虚或不显示。光晕不是越“大”越好，而是要“刚好够亮”。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
box-shadow: 0 0 6px 2px rgba(0, 120, 255, 0.25), 0 0 12px rgba(0, 120, 255, 0.1) - 第一层带扩散半径（第4个参数），贴边更清晰；第二层纯模糊，负责氛围——两层比单层更稳
- 深色背景上别用
rgba(0, 120, 255, 0.1)，透明度过高会看不清，改用rgba(100, 180, 255, 0.25) - 务必加
transition: box-shadow 0.2s ease，但别写transition: all，否则 padding 或 border 变化会引发重排
Tailwind 用户注意 ring-1 的圆角陷阱
在 Tailwind 中，ring-1 rounded-full 看似能一起生效，实际 ring 默认没有圆角，rounded-full 对它无效——结果就是光晕是方的，输入框是圆的，视觉割裂。
- 正确写法：
ring-1 rounded-full ring-blue-500 focus:ring-2 focus:ring-blue-400，且必须确保父容器没设border类 - 如果用了图标按钮（如搜索放大镜），图标容器也要同步加
rounded-full，否则左右不对齐 - 安卓部分 WebView 对
ring渲染异常，可降级为focus:shadow-md focus:shadow-blue-300/30保底
真正麻烦的从来不是怎么写那几行 CSS，而是得在 Safari 的:focus不触发、Android 的阴影卡顿、深色模式下的透明度失效、以及可访问性要求之间找平衡点——每台设备都在悄悄改规则，你写的光晕，得先活下来，才能被人看见。
