input:focus不生效主因有三：outline被重置、选择器优先级不足、移动端未激活可聚焦态；推荐用box-shadow替代border并配合:focus-visible和:focus-within精准控制高亮。
input:focus 样式不生效，大概率不是写错了，而是被浏览器默认行为或 CSS 优先级盖过去了。先确认它真能触发，再调样式。
为什么 input:focus 没反应？
最常卡在这三处：
-
outline: none被全局重置（比如* { outline: none; }或框架 CSS 里写了），导致焦点状态“看不见”也不触发你的规则 - 选择器优先级不够——比如你写
input:focus，但框架里有.form-control:focus，后者权重更高，你的样式被划掉 - 移动端（尤其 iOS Safari）没激活可聚焦态：
input必须能响应点击，否则:focus不触发；加ontouchstart=""或cursor: pointer可解
用 box-shadow 做高亮比改 border 更稳
单纯改 border-color 容易引起布局跳动（border-width 不变但颜色变，视觉上还是抖），而 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;，写在基础input规则里，别只写在:focus里
:focus-visible 才是键盘用户的真正需要
鼠标点一下就弹出高亮边框，用户会觉得突兀；但键盘 Tab 导航时又必须强提示。:focus-visible 只在明确键盘操作时生效，比 :focus 更精准。
-
input:focus { outline: none; }是基础兜底 - 再加
@supports (selector(:focus-visible)) { input:focus-visible { box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25); } } - Safari 15.4+ 支持，旧版需降级；React 等封装组件可能不透传该状态，得手动绑定
:focus-within 高亮整个表单区域怎么写？
想点一下输入框，让整个 label + input 包裹容器变色？:focus-within 是正解，不用 JS。
- HTML 结构必须是嵌套的：
<div class="form-item"> <label>邮箱</label><input type="email"> </div>，input得是.form-item的后代 -
.form-item:focus-within不要求父容器设tabindex，这点和:focus本质不同 - 别在五层嵌套的
div上滥用，否则多层同时高亮，视觉混乱；Safari 15.4+ 才稳定支持，旧版得靠 JS 监听focusin/focusout切类名
真正容易被忽略的是：动态插入的 input 元素，即使 HTML 结构看起来对，如果没正确挂载进 DOM 或初始状态异常（比如被 display: none 或 disabled），:focus-within 和 :focus 都会静默失效——得检查它是否真实可聚焦，而不是只看标签有没有写对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
