input:focus 时 transition 不生效的常见原因
直接写 transition: border-color 0.3s 却没动画？大概率是初始 border-color 和聚焦后颜色之间存在「隐式类型冲突」或「层叠覆盖」。比如初始边框靠浏览器默认样式（可能带 border-style: none 或 border-width: 0），而 :focus 只改了 color，但 border 整体未声明，导致过渡起点为「无边框」→「有边框」，浏览器不触发颜色过渡。
- 必须显式定义初始
border：至少包含border-width、border-style、border-color三者，不能依赖默认值 -
transition要写在初始状态（即input规则里），不是只写在:focus中 - 避免用
border: 1px solid #ccc+:focus { border-color: #007bff }这种写法——它会重置整个border，导致宽度/样式也被“过渡”，视觉上像闪烁
正确写法：分离 border-color 过渡 + 兼容性保障
只让颜色动，其他边框属性保持稳定，才能顺滑。关键是把 border 拆开写，且确保初始和聚焦状态都声明了完整的 border-color。
input {
border-width: 1px;
border-style: solid;
border-color: #d9d9d9; /* 显式定义起始色 */
transition: border-color 0.2s ease-in-out;
}
input:focus {
outline: none; /* 去掉原生焦点环，避免叠加 */
border-color: #4096ff;
}- 不用
border: 1px solid ...，改用分项声明，防止:focus时因简写重置引发意外过渡 -
outline: none很关键——否则原生蓝色环还在，和自定义边框共存，视觉混乱 - IE10+ 支持
border-color过渡，但 IE9 及更早版本不支持；如需兼容，得降级为 JS 切换 class
遇到 input[type="number"] 或某些 UI 库组件失效怎么办
原生 input[type="number"] 在 Chrome/Firefox 中默认有内部箭头，部分浏览器会强制添加 appearance: auto 并干扰边框渲染；而 Ant Design、Element Plus 等库封装的输入框，往往把真实 input 包在多层 div 里，CSS 作用不到目标节点。
- 对原生 number 输入框，加
-webkit-appearance: none;和appearance: none;消除控件干扰 - 对封装组件，打开开发者工具定位到实际
input元素，用类名或属性选择器精确穿透，例如：.el-input__inner:focus或input[aria-label="搜索"] - 某些库（如 Tailwind）默认禁用
focus样式，需确认是否启用了focus变体（class="focus:border-blue-500"）
移动端 focus 状态不稳定或延迟触发
iOS Safari 和部分安卓 WebView 对 :focus 的触发时机很保守——常要等键盘弹出后才真正应用样式，导致过渡看起来“卡半拍”。这不是 CSS 写错了，而是事件时机问题。
立即学习“前端免费学习笔记（深入）”；
- 别依赖纯 CSS 的
:focus做关键交互反馈，可用onfocus事件配合 JS 添加临时 class 实现更可控的过渡 - 给
input加ontouchstart="this.focus()"（仅 iOS）能提前触发 focus，但注意不要影响可访问性 - 如果用
transition-delay强行补时间，反而会让体验更割裂——不如接受这个平台特性，把过渡时间设短（0.1s），减少感知延迟
过渡本身很简单，难的是让每个浏览器、每种输入类型、每层封装都按你设想的时机响应。最常被忽略的，其实是 outline 和 appearance 这两个“隐身选手”。
