input:focus边框变色无效主因是outline遮挡或初始border未定义；须设outline:none、声明基础border、transition仅限border-color，暗色模式需媒体查询重定义颜色。
input:focus 边框变色没反应，大概率是被默认 outline 盖住了，或者根本没定义初始 border —— 不是 CSS 写错了，是缺了关键前提。
为什么 input:focus { border-color: red; } 没效果？
浏览器默认给聚焦的 input 加的是 outline（蓝色环），它叠在你自定义的 border 上面，看起来像“没变色”。
更麻烦的是：如果原始样式里没写 border，比如只写了 border: none 或压根没声明，那 border-color 就无从过渡——颜色变了，但边框本身不存在。
- 必须显式设置初始
border，例如border: 1px solid #d9d9d9; - 必须加
outline: none;或outline: 0;（推荐none） - 别用
border: 1px solid #ccc;这种简写在:focus里覆盖——会重置整个border，导致宽度/样式突变
怎么让变色过渡自然不闪？
直接改 border-color 最稳，但得配对过渡。用 all 会把 padding、background 也拖进来，纯属找坑。
- 基础写法：
transition: border-color 0.2s ease-in-out; - 如果同时用了
box-shadow，建议一起过渡：transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - 千万别在
input基础样式里写transition: all 0.3s;—— 后续加font-size或background都会意外动起来
移动端 Safari 点击没反应？
iOS Safari 对 :focus 的触发很保守，尤其手指点击时经常静默，不是代码问题，是 UA 样式策略。
- 先试
-webkit-appearance: none;解锁原生样式封锁 - 真机测试必须用手指点，模拟器不可信
- 如果还是不触发，退一步用
box-shadow: 0 0 0 2px #007bff;替代border—— iOS 对box-shadow支持更稳 - 注意：加了
box-shadow后，outline-offset就失效了，别混着用
暗色模式下边框看不见？
很多人只在亮色背景上调试，切到深色系统后，border-color: #4096ff 可能和背景融成一片，键盘用户完全找不到焦点在哪。
- 必须加媒体查询：
@media (prefers-color-scheme: dark) { input:focus { border-color: #9ecbff; } } - 别依赖
currentColor—— 如果父元素设了color: transparent，border-color: currentColor就是透明的 - 可访问性底线：删掉
outline后，border或box-shadow必须足够粗、足够对比，否则键盘用户 Tab 导航时会卡住
真正难的不是写出那三行 CSS，而是判断这个输入框谁在用——鼠标用户要美观，键盘用户要可见，两者冲突时，后者不能妥协。一个 box-shadow 多写几像素，可能就救了一个正在用屏幕阅读器填表单的人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
