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 处理。
