根本原因是未设box-sizing: border-box导致content-box下padding和border额外撑开，焦点时border-width变化引发重排抖动；必须统一初始border宽度、仅改颜色，或改用box-shadow替代。
focus时input宽度突变，根本不是:focus的问题
实际是浏览器默认用box-sizing: content-box算尺寸，width: 100%只管内容区，而padding和border额外加在外部。焦点状态下你改了border-color或border-width，但没同步处理盒模型，结果宽高就跳了。
常见错误现象：点击后输入框突然变宽/变窄、旁边元素被挤开、文字错位。
- 别只改
border-color——必须先确保基础border已定义，比如border: 2px solid #ddd，否则改颜色无效 - 如果设计要求“聚焦时加粗边框”，原始
border得用transparent占位：border: 2px solid transparent，再在:focus里改成border: 2px solid #007bff - 绝对不要写
border: 1px → 2px这种切换，会触发重排，周围布局抖动
为什么加了box-sizing: border-box还抖？
加了box-sizing: border-box只是让width包含padding和border，但没解决border-width变化带来的尺寸差。比如原始border: 1px，聚焦时改成2px，哪怕盒模型一致，总宽仍多出2px（左右各+1px）。
实操建议：
- 统一用
border: 2px solid xxx起始，聚焦时只换color，不碰width - 想突出焦点又不想动边框？用
box-shadow: inset 0 0 0 1px #xxx，它不参与盒模型计算，无重排风险 - Flex容器里还要加
min-width: 0，否则替换元素（如input）默认min-width: auto会抗拒收缩，放大抖动
移动端:focus失效或抖动更隐蔽
iOS Safari对:focus触发不敏感，尤其嵌套在flex或transform容器中；Android部分浏览器则可能因pointer-events: none继承导致点击不聚焦。
关键检查点：
- 给
input加tabindex="0"，确保可聚焦（哪怕没键盘需求） - 用DevTools强制触发
:focus状态，看computed样式里outline是否为none且没被!important锁死 - 禁用
outline后必须补视觉反馈：box-shadow: 0 0 0 2px rgba(0,123,255,0.25)比单改border-color更稳 - 暗色模式下边框色可能不可见，加
@media (prefers-color-scheme: dark)单独定义
最易被忽略的调试盲区
很多人修完CSS就以为好了，但没验证事件落点是否真对齐——肉眼看着正常，鼠标其实点在空处。
务必做两件事：
- 控制台执行
input.getBoundingClientRect()，比对返回的width/height和视觉是否一致 - DevTools → Rendering → 勾选
Paint flashing，点击时看红色闪动是否精准覆盖输入框区域
如果闪动偏移，说明仍有浮动塌陷、transform扭曲坐标系，或伪元素意外覆盖热区——这些不会在CSS里直接暴露，但会让:focus效果形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
