input:focus没反应通常因CSS优先级被覆盖，如outline:none未配替代样式；应检查开发者工具、确保:focus在普通样式后声明，并用:focus-visible提升可访问性。
input:focus 为什么没反应？检查是否被其他样式覆盖
最常见的情况是 :focus 写了但没生效，不是语法错，而是 CSS 优先级被更高权重的规则压住了。比如重置库（如 Normalize.css）或框架（如 Bootstrap）里可能有 outline: none 强制清除，或者你自己写了 input { outline: 0 } 却忘了给 :focus 补上高亮。
实操建议：
- 用浏览器开发者工具检查元素，看
:focus对应的样式是否被划掉（表示被覆盖） - 确保聚焦样式写在普通状态之后，例如先写
input { border: 1px solid #ccc; }，再写input:focus { border-color: #007bff; } - 如果用了
outline: none，务必配一个替代方案，比如box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25)，否则会破坏可访问性
focus-visible 是什么？什么时候该用它
:focus-visible 是现代浏览器用来区分“键盘聚焦”和“鼠标点击后意外触发 focus”的伪类。比如用户点一下 input，Chrome 默认不会触发 :focus-visible；但按 Tab 键进入时就会——这对避免鼠标用户看到突兀高亮很关键。
实操建议：
- 想兼顾可访问性和体验，优先用
input:focus-visible替代input:focus - 注意兼容性：
:focus-visible在 Safari 15.4+、Chrome 86+、Firefox 83+ 支持，旧版本需降级回:focus - 不要直接删掉
:focus，可以用@supports做渐进增强：input:focus { outline: none; }<br>@supports (selector(:focus-visible)) {<br> input:focus-visible { outline: 2px solid #007bff; }<br>}
border 和 box-shadow 哪个更适合做聚焦高亮
单纯改 border-color 最轻量，但容易让输入框“跳动”（因为边框宽度变化影响布局）；box-shadow 不影响盒模型，视觉更稳，也更容易做出柔和扩散效果。
实操建议：
- 如果 border 宽度固定（比如始终是
1px solid），改颜色是安全的 - 想加内阴影或外发光，必须用
box-shadow，例如：box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 2px rgba(0,123,191,0.25) - 慎用
transform: scale()类动画：移动端缩放可能触发双击放大，且对性能不友好
表单验证失败时还要不要保留 focus 高亮
要。验证失败（比如 :invalid）和聚焦（:focus）是两个正交状态，用户可能正在编辑、还没输完就触发了验证，此时去掉高亮反而干扰操作流。
实操建议：
- 把
:focus和:invalid组合使用：input:focus:invalid { border-color: #dc3545; } - 避免用
!important强行覆盖，而是靠选择器权重控制优先级 - 如果用了 JS 动态加 class（如
is-error），记得在聚焦时别移除它——焦点和错误状态可以共存
真正容易被忽略的是可访问性细节：屏幕阅读器依赖 outline 或等效焦点指示，砍掉它又没补 box-shadow 或 border，等于把键盘用户挡在门外。高亮不是为了好看，是告诉用户“你现在在哪”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
