:focus在移动端不触发主因是系统优化压制焦点渲染，需确保元素可聚焦、加ontouchstart或cursor:pointer，并用outline:none+border+transition统一控制视觉反馈。
focus伪类在移动端不触发的常见原因
很多开发者发现 :focus 在 iOS Safari 或部分安卓浏览器里点输入框没反应，边框不变色。这不是写法错了，而是移动端默认行为压制了焦点样式：系统为了优化触控体验，会延迟或跳过非关键元素的焦点状态渲染，尤其当 input 没有绑定实际交互（比如没加 onclick 或没设 tabindex）时更明显。
- 必须确保
input是可聚焦的：不加disabled、不设tabindex="-1"、父级没pointer-events: none - iOS Safari 要求元素“可操作”，建议给
input加ontouchstart=""（空事件）或cursor: pointer触发底层聚焦逻辑 - 某些 WebView（如微信内置）会忽略纯 CSS 的
:focus，需配合:focus-within或 JS 监听focus事件补样式
正确写法：focus + outline + border 组合控制
只改 border 不够，因为移动端常默认隐藏 outline，而系统高亮（比如 iOS 的浅蓝蒙层）可能盖掉你的边框变化。得主动接管整个焦点视觉反馈。
- 先清空默认
outline：outline: none，否则和自定义边框打架 - 用
border改颜色/宽度，推荐用box-sizing: border-box避免尺寸跳动 - 加
transition: border-color 0.2s让变化柔和，不然 iOS 点击瞬间会闪一下 - 示例：
input:focus {<br> outline: none;<br> border-color: #007aff;<br> transition: border-color 0.2s;<br>}
兼容老安卓机（4.4–6.0）的兜底方案
Android 4.x 的 WebView 对 :focus 支持极差，甚至点击后不触发，必须靠 JS 强制同步状态。
- 监听
focus和blur事件，动态加 class：input.classList.add('is-focused') - CSS 写两套：
input:focus和input.is-focused，覆盖不同环境 - 避免用
document.activeElement判断，老安卓下它常滞后或返回body - 如果项目用 Vue/React，别只依赖 v-model 或受控组件的 focus 状态，要显式绑定原生事件
为什么不用 focus-visible？
:focus-visible 看起来更智能（只在键盘聚焦时生效），但它在移动端基本无效——触屏操作不会触发该伪类，iOS 和多数安卓浏览器至今不支持。
- MDN 明确标注：Safari 全系不支持，Android Chrome 84+ 才开始有限支持
- 想兼顾键盘和触屏，还是得用
:focus，再靠 JS 区分输入方式（比如监听keydown判断是否键盘操作） - 真要用
:focus-visible，必须配@supports (selector(:focus-visible))查询，否则老浏览器直接忽略整条规则
实际项目里最麻烦的不是写法，是同一套 CSS 在微信、QQ、钉钉、系统浏览器里表现不一致——有的认 :focus，有的只响应 JS class，有的连 ontouchstart 都被拦截。测的时候别只看 Chrome DevTools 的模拟器，真机连 Safari 和微信各来一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
