:focus伪类未生效主因是默认outline覆盖边框，需用outline:none清除并以box-shadow替代实现无障碍焦点提示；同时注意优先级、input类型兼容性及移动端限制。
focus伪类为什么没生效？检查是否被outline覆盖
直接写 :focus 但边框没变，大概率是浏览器默认的 outline 在干扰。它会叠在边框外层，视觉上盖住你设的 border，尤其在 Chrome/Firefox 中明显。
- 必须显式清除或重置：给输入框加
outline: none或outline: 0 - 但别只清不补——无障碍访问依赖焦点提示，建议用
box-shadow替代（支持键盘 Tab 导航且更可控） - 若用
border改变粗细，注意触发重排：比如从1px solid #ccc变成2px solid #007bff，宽度变化会让布局抖动
如何让 focus 样式兼容所有 input 类型
:focus 本身对 <input> 全类型都有效，但不同 type 的默认样式差异大（比如 type="number" 在 Safari 有内置 spinner，可能遮挡边框）。
- 统一处理：用属性选择器批量匹配，例如
input:focus, textarea:focus, select:focus - 避免漏掉
contenteditable元素，如需支持，额外加[contenteditable="true"]:focus - 移动端要注意 iOS Safari 对
input[type="date"]等控件的限制——部分 focus 样式会被系统 UI 覆盖，无法完全自定义
border-color 动画卡顿？换用 box-shadow 实现平滑过渡
直接对 border-color 做 transition 在低配设备上容易掉帧，尤其连带 border-width 变化时。
- 推荐方案：固定
border，改用box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25)模拟“高亮边框” - 这样只需过渡
box-shadow的颜色/透明度，GPU 加速更稳 - 示例：
input { border: 1px solid #ddd; transition: box-shadow 0.2s ease; }<br>input:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); }
focus 样式被其他 CSS 覆盖？优先级和 specificity 是关键
常见现象：写了 input:focus { border-color: red; }，但实际还是蓝色——多半是第三方库（如 Bootstrap）或更高权重的选择器压过了它。
- 检查计算样式（DevTools 的 Computed 面板），看哪条规则胜出
- 提升 specificity：用
input[type="text"]:focus或加父容器类名，比如.form-group input:focus - 极端情况可用
!important，但仅限调试；生产环境应靠结构优化而非暴力覆盖
focus 和 blur 事件微调，纯 CSS 很难兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
