:focus没反应需先排查三件事：outline被重置、选择器优先级不足、移动端未激活可聚焦状态；推荐用box-shadow替代border实现稳定焦点高亮，并结合:focus-visible提升键盘用户可访问性。
input:focus 没反应？先查这三件事
不是代码写错了，而是:focus根本没被浏览器识别。最常卡在这三个地方：outline: none被全局重置、选择器优先级不够、移动端未激活可聚焦状态。
- 打开开发者工具，检查
input:focus样式是否被划掉——如果被划掉，说明有更高权重规则（比如框架的.form-control:focus）覆盖了它 - 确保
input没加disabled、readonly或tabindex="-1"，父容器也没设pointer-events: none - 移动端（尤其 iOS Safari）必须让元素“可操作”：给
input加ontouchstart=""或cursor: pointer，否则点击不触发:focus
用 box-shadow 替代 border 做焦点高亮更稳
单纯改border-color容易导致布局跳动，而box-shadow不改变盒模型，适配圆角也更自然。关键是要清掉默认outline，再补上可访问性友好的视觉反馈。
- 必须写
outline: none，否则系统默认轮廓（如 iOS 浅蓝蒙层）会盖住你的样式 - 推荐写法：
box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25)，第三个0是水平偏移，第四个0是垂直偏移，第五个2px是扩散半径 - 加
transition: box-shadow 0.2s让光晕出现更柔和；别用transform: scale()，iOS 可能误判为双击放大 - 深色主题下光标看不见？显式设置
caret-color: #007bff（iOS 15.4+ 支持）
:focus-within 适合高亮整个表单区域
想点一下输入框就让整个label+input包裹容器变色？别只用:focus，:focus-within才是正解——它匹配自身或任意后代获得焦点的父容器。
- HTML 结构得是嵌套的，比如
<div class="form-item"> <label>邮箱</label><input type="email"> </div>，input必须是.form-item的后代 -
.form-item:focus-within生效不需要给div加tabindex，这是和:focus的本质区别 - 兼容性注意：Safari 15.4+ 才稳定支持，旧版需降级——用 JS 监听
focusin/focusout手动切类名 - 别在深层嵌套容器（如五层
div包一层input）上滥用，否则多层同时高亮，视觉混乱
:focus-visible 是键盘用户的专属高亮
鼠标点一下输入框就弹出蓝边框，用户会觉得突兀；但键盘用户靠 Tab 导航，又必须有强提示。这时候:focus-visible比:focus更精准。
-
:focus只要元素获焦就触发（鼠标点、Tab 键、JS.focus()都算）；:focus-visible只在明确键盘导航时生效 - 推荐渐进增强写法：
input:focus { outline: none; }+@supports (selector(:focus-visible)) { input:focus-visible { box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25); } } - React/Vue 封装的 Input 组件可能不透传
focus-visible状态，得手动在组件里绑定onFocus并加类名 - 高亮色对比度必须 ≥ 4.5:1，否则屏幕阅读器用户无法感知——别只靠肉眼判断
touch-action: manipulation的配合。缺了它，iOS Safari 可能连第一次点击都不触发:focus，更别说后续交互了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
