input:focus边框变色无反应最常见原因是outline未关闭或CSS优先级不足；需设outline:none、确保选择器权重足够、定义基础border并添加transition: border-color 0.2s ease-in-out。
input:focus 边框变色为什么没反应？
最常见的原因是 CSS 优先级被覆盖，或者 outline 没关导致视觉干扰。浏览器默认会给聚焦的 input 加一层蓝色 outline，它会压在你写的 border 上面，看起来像“没变色”。
- 必须显式设置
outline: none或outline: 0（推荐用none，语义更清晰） - 确保你的
:focus规则比其他样式优先级高——比如写成input:focus而不是.form-input:focus如果基础选择器更弱 - 别忘了给原始状态也定义
border，否则聚焦时只有颜色变化，宽度/样式不一致会闪动
如何让 focus 变色更自然？
生硬的“突变”会让交互显得机械。加 transition 是最直接的解法，但要注意过渡属性和时机。
- 只过渡
border-color，别用all，避免意外动画（比如box-shadow或background也被拖进来） - 推荐写法：
transition: border-color 0.2s ease-in-out - 如果 input 同时有
box-shadow，也建议一起过渡，否则聚焦时阴影突然出现会跳 - 移动端 Safari 对
:focus支持不稳定，真机测试时记得点一下输入框看是否触发
focus 状态下要改哪些边框属性？
单改 border-color 最安全；但若设计稿要求“加粗+变色”，就得同步调 border-width，这时要注意布局抖动。
- 如果增加
border-width，原始border建议用solid transparent占位，比如：border: 2px solid transparent，聚焦时改成border: 2px solid #007bff - 千万别用
border: 1px → 2px这种写法，会导致元素宽高重排，周围内容会晃 - 想加内边框效果？用
box-shadow: inset 0 0 0 1px #xxx更稳妥，不影响盒模型
focus 样式在表单验证中怎么配合？
用户聚焦输入框，往往意味着准备输入或正在纠错，这时候的样式最好和验证状态联动，但别过早干预。
- 不要一聚焦就显示错误提示——用户还没输呢。等
blur或input事件后校验更合理 - 可以用
:focus-visible替代:focus来区分键盘聚焦（如 Tab）和鼠标点击，提升可访问性 - 如果用了
required或pattern原生验证，注意某些浏览器会在聚焦时就渲染伪类:invalid:focus，需单独覆盖
真正容易被忽略的是：focus 样式在暗色模式下可能完全看不见。别只测亮色背景——加一句 @media (prefers-color-scheme: dark) 里重新定义颜色，不然用户切到深色系统，边框就消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
