最简单方案是用:focus伪类改outline；需保留outline-style、兼顾:focus-visible、处理iOS viewport缩放问题。
focus 状态下用 outline 实现边框效果最简单
HTML5 表单元素（如 、、）默认获得焦点时会显示浏览器自带的 outline，但样式不统一、常被设计师嫌弃。直接用 CSS 的 :focus 伪类改 outline 是最快方案，无需 JS 干预。
-
outline不占布局空间，不会引起页面重排，比border更安全 - 部分旧版 Safari 对
outline: none后再设新outline支持不稳定，建议始终保留outline-style - 若需兼容键盘导航（如 Tab 切换），绝不能写
outline: none且不替换——这会让残障用户失去焦点提示
input:focus,
textarea:focus,
select:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}用 border 替代 outline 需手动处理尺寸塌陷
如果设计要求聚焦时“边框变粗”或“颜色+粗细同时变化”，用 border 更可控，但必须提前预留空间，否则焦点切换时元素会轻微抖动。
- 非聚焦态就用
border: 2px solid transparent占位，聚焦时只改color和border-color - 避免用
border: 1px → 3px这类宽度变化，会导致 layout shift，Lighthouse 会报“Cumulative Layout Shift”警告 -
box-sizing: border-box必须确保已全局设置，否则border加宽会撑大元素
input,
textarea,
select {
border: 2px solid transparent;
box-sizing: border-box;
}
input:focus,
textarea:focus,
select:focus {
border-color: #28a745;
}
自定义聚焦样式要兼顾 :focus-visible 逻辑
现代浏览器支持 :focus-visible，它只在键盘触发焦点（如 Tab）时生效，鼠标点击时不触发。这对“既要视觉反馈、又不想干扰鼠标用户”的场景很关键。
- 别用
:focus覆盖所有场景，优先用:focus-visible做可访问性友好的聚焦边框 - Edge 103+、Chrome 86+、Firefox 89+ 已支持；Safari 15.4+ 开始支持，但需加
-webkit-focus-ring-color回退 - 若项目需兼容老浏览器，可用
focus-visiblepolyfill，但注意它依赖classList操作
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid #007bff;
outline-offset: 2px;
}
/ Safari 15.3 及更早版本回退 /
@supports (-webkit-appearance: none) {
input:focus,
textarea:focus,
select:focus {
outline: 3px solid #007bff;
}
}
移动端 iOS Safari 的 focus 边框有特殊行为
iOS Safari 默认会给 input 聚焦时放大整个页面（viewport 缩放），同时边框可能被系统高亮覆盖。这不是 CSS 能完全解决的问题，得配合 meta 和事件干预。
立即学习“前端免费学习笔记（深入）”；
- 必须在
中加，禁用缩放 - iOS 16.4+ 允许用
input:focus { -webkit-appearance: none; }去除原生高亮，但会丢失圆角等样式，慎用 - 如果表单在 modal 或 fixed 容器中，iOS 有时不触发
:focus，可尝试加tabindex="0"强制可聚焦
:focus-visible 的兼容性和 iOS 的 viewport 控制是实际项目中最容易漏掉的两处。前者影响键盘用户的可访问性体验，后者导致测试时在真机上边框“消失”或页面乱跳——光看桌面 Chrome 是发现不了的。
