input:focus边框变色无效的主因是outline遮挡，需设outline: none;并补充视觉反馈；初始border必须定义（如border: 1px solid #ccc;），transition须写在默认状态且仅限border-color等必要属性，暗色模式需重定义颜色。
input:focus 边框变色没反应，先关 outline
直接写 input:focus { border-color: #007bff; } 却没效果，八成是浏览器默认的 outline 在“抢戏”。它盖在你改的边框上，颜色再准也看不见。必须显式清掉：outline: none; 或 outline: 0;（推荐前者，语义清晰）。但删了不能真“消失”——键盘用户靠 Tab 导航时会彻底失焦，得立刻补上替代视觉反馈。
只改 border-color 前，确保原始 border 已定义
很多输入框初始样式是 border: none; 或压根没设 border，这时单写 border-color 不生效：宽度为 0，颜色再亮也没像素可画。实操要配对写：
- 基础状态必须有
border: 1px solid #ccc;（或类似值） - 聚焦状态再改
border-color: #007bff;，别只动颜色 - 如果设计要求“加粗”，用
border-width: 2px;替代1px，但得提前用border: 2px solid transparent;占位，否则宽高跳变
移动端 iOS Safari 点击无反馈？加 ontouchstart 或 cursor:pointer
iOS Safari 默认压制非交互元素的焦点渲染，哪怕它是 input。不点不触发 :focus，更别说边框变色。解法不是等系统修复，而是主动“唤醒”：
- 给 input 加空事件：
ontouchstart=""（HTML 属性），触发底层聚焦逻辑 - 或加 CSS：
cursor: pointer;，让系统认为这是可点击目标 - 真机测试必须用手点，模拟器常骗人；微信 WebView 还可能完全忽略纯 CSS :focus，得靠 JS 监听
focus事件动态加 class
transition 写在哪？只动 border-color，别碰 all
边框突变很机械，加过渡是基本操作，但位置和范围容易错：
-
transition必须写在**默认状态**（非 :focus）里，比如input { transition: border-color 0.2s ease; } - 只过渡
border-color，别用all——万一元素还有box-shadow或background，全被拖进动画，交互变卡顿 - 如果同时用了
box-shadow作焦点反馈，把它也加进 transition 列表：transition: border-color 0.2s ease, box-shadow 0.2s ease;
border-color 可能和背景融成一片，@media (prefers-color-scheme: dark) 里重定义颜色不是锦上添花，是必选项。
