input:focus 默认触发浏览器 outline，需用 outline: none 或 outline: 2px solid transparent + outline-offset 清除或占位；必须配合 box-sizing: border-box 防布局偏移，并优先使用 :focus-visible 保障键盘可访问性。
input:focus 伪类的基本行为
默认情况下，input:focus 会触发浏览器自带的焦点轮廓（outline），比如 chrome 的蓝色高亮环。这个轮廓不是边框（border），而是独立的 outline 样式，优先级高、样式固定，直接改 border-color 不会覆盖它。
去掉 outline 再自定义边框颜色
要让边框颜色生效，必须先清除默认 outline，否则会出现双层焦点效果（外圈 outline + 内圈 border）。常见错误是只写 border: 2px solid #007bff 却漏掉 outline: none。
input:focus { outline: none; border: 2px solid #007bff; border-radius: 4px; }-
outline: none是必要前提，但注意：它会影响键盘可访问性，生产环境建议用outline: 2px solid transparent+outline-offset替代 -
border宽度变化时，元素尺寸会波动（除非提前设好box-sizing: border-box） - 如果 input 原本没有边框（如
border: none），聚焦时突然出现边框会导致布局偏移
保持尺寸稳定且可访问的写法
真正健壮的做法是：初始态预留边框空间，仅变色不变宽；同时为键盘用户保留视觉反馈。
input { border: 2px solid #ddd; box-sizing: border-box; } input:focus { border-color: #007bff; outline: 2px solid transparent; outline-offset: 2px; }-
box-sizing: border-box确保 padding 和 border 不撑大元素 -
outline: 2px solid transparent保留 outline 占位，避免重绘抖动 -
outline-offset: 2px把透明 outline 推到边框外侧，键盘聚焦时再用 js 或 :focus-visible 切换为实色
:focus-visible 更精准地适配输入方式
纯 css 无法区分鼠标点击和键盘 Tab 聚焦，:focus-visible 是现代解法——只在键盘操作时生效，鼠标点击后自动退回到普通 :focus 样式。
立即学习“前端免费学习笔记（深入）”；
input:focus { border-color: #ccc; } input:focus-visible { border-color: #007bff; outline: 2px solid #007bff; outline-offset: 2px; }注意：:focus-visible 在 safari 中需加前缀 -webkit-focus-visible，且旧版 edge 不支持。若需兼容，仍得回退到统一 :focus 处理。
实际项目里，最易被忽略的是边框宽度突变引发的 layout shift，以及 outline 清除后对屏幕阅读器用户的提示缺失。这两点不处理，样式再漂亮也属于半残废实现。