:focus伪类配合border-color变化和box-shadow发光实现可访问高亮，需设transition平滑过渡，并优先用:focus-visible适配键盘用户。
直接用 :focus 伪类配合边框变色或阴影就能实现高亮，无需 JavaScript。关键在于样式要可感知、可访问，且不被其他规则意外覆盖。
用 border-color 变化做基础高亮
这是最轻量、兼容性最好的方式。在原始 input 样式里定义默认边框，再通过 :focus 改变颜色：
- 确保 input 默认有明确的边框，比如
border: 1px solid #ccc; - 聚焦时改色：
input:focus { border-color: #007AFF; outline: none; } - 务必保留
outline: none的同时提供替代提示——否则键盘用户会完全看不到焦点在哪
加 box-shadow 实现外发光效果
比单纯改边框更醒目，适合强调当前操作项：
- 推荐写法：
box-shadow: 0 0 6px rgba(0, 122, 255, 0.4); - 避免用不透明纯色（如
#007AFF），否则像描边，不是发光 - 检查父容器是否设置了
overflow: hidden——这会把阴影裁掉，导致“发光消失”
让变化更自然：加上 transition
硬切颜色或阴影会显得突兀，过渡动画能显著提升体验：
- 在 input 基础样式中统一加：
transition: border-color 0.2s ease, box-shadow 0.2s ease; - 这样获得和失去焦点时，颜色与阴影都会平滑进出，不闪不跳
- 时间值建议控制在 0.2–0.3 秒之间，太长拖沓，太短接近无感
适配键盘用户的 focus-visible（进阶建议）
如果想只对键盘 Tab 导航生效、鼠标点击不触发，可用 :focus-visible 替代 :focus：
- 写法类似：
input:focus-visible { border-color: #007AFF; box-shadow: 0 0 6px rgba(0,122,255,0.4); } - 但必须确认没全局清除 outline（比如
* { outline: none }），否则伪类失效 - 现代浏览器支持良好，Safari 从 15.4 起已原生支持
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
