最常见的原因是CSS优先级被覆盖或未处理outline，默认光标消失是因对比度不足，应显式设置caret-color；:focus对所有焦点触发，:focus-visible仅限键盘导航，box-shadow比border更优且需加transition。
input:focus 为什么没生效
最常见的原因是 CSS 优先级被覆盖，比如框架或重置样式里写了 input:focus 但后面又用更具体的选择器（如 .form-control:focus）重写了，或者用了 !important 锁死默认行为。另一个高频坑是：没给 input 设置 outline: none 就直接改边框，结果浏览器默认 outline 还在闪，新样式被盖住。
- 先检查开发者工具里
:focus规则是否被划掉（表示未生效） - 确保选择器足够具体，例如用
input[type="text"]:focus比单纯input:focus更稳 - 如果要去掉默认轮廓，必须显式写
outline: none，但别忘了加替代焦点指示（比如box-shadow），否则可访问性出问题
:focus 和 :focus-visible 的区别在哪
:focus 只要元素获得焦点就触发，不管怎么触发的（鼠标点、Tab 键、JS 调用 .focus() 都算）；:focus-visible 是现代浏览器才支持的伪类，只在“明显是键盘导航触发焦点”时才匹配——比如用户按 Tab 进入输入框，它会生效；但鼠标点击时通常不生效。这对兼顾可访问性和体验很关键。
- 想统一所有焦点状态，用
:focus - 想只优化键盘用户的视觉反馈（避免鼠标党看到突兀高亮），优先用
:focus-visible - 注意兼容性：
:focus-visible在 Safari 15.4+、Chrome 86+、Firefox 87+ 支持，旧版本需回退到:focus - 可以组合写：
input:focus:not(:focus-visible) { outline: none; }，让鼠标点击时不显示焦点环，但键盘操作仍保留
改边框颜色后光标不见了怎么办
不是光标真没了，而是当 input 的 color（文字色）和背景色对比度太低，或者用了透明/浅色边框时，系统默认光标颜色（通常是黑色或白色）可能被“吃掉”。尤其在深色主题下容易发生。
- 显式设置
caret-color，比如caret-color: #007bff; - 别只改
border-color，顺手加上background-color和color，保证文本可读 - 移动端 iOS Safari 对
caret-color支持较晚（iOS 15.4+），老版本只能靠调整color和背景反差来缓解
用 box-shadow 做焦点效果更靠谱吗
比单纯改 border 更灵活，也更容易避免布局偏移（border 宽度变化会触发重排，box-shadow 不会）。而且能做出内阴影、多层阴影、平滑过渡等效果，视觉上更现代。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25);（外发光）或inset 0 0 0 2px #007bff;（内发光） - 务必搭配
transition: box-shadow 0.15s ease-in-out;，不然焦点切换太生硬 - 注意不要把
box-shadow写太宽，否则在小屏幕或缩放时会溢出容器，影响可访问性宽度检测
