:focus边框变色无效主因是outline遮挡，需用outline:none并补替代样式；防布局抖动应预设border宽度；推荐:focus-visible兼顾无障碍；iOS/微信需ontouchstart或cursor:pointer激活。

button:focus 边框变色无效？先看 outline 是否遮挡

直接写 button:focus { border-color: #007bff; } 没反应，大概率是浏览器默认的 outline 盖住了你设的边框。它不占布局、位置偏外、颜色常为深蓝或黑，视觉上完全压过 border。必须显式处理：outline: none; 或 outline: 0;（推荐前者）。但删了不能真“没反馈”——键盘用户靠 Tab 导航时会彻底失去焦点提示，得立刻补上替代样式。

用 border 实现聚焦边框要预留空间，否则页面抖动

如果设计要求“边框加粗+变色”，比如从 1px solid #ccc 变成 2px solid #007bff，直接改宽度会导致 layout shift，Lighthouse 会报 Cumulative Layout Shift 警告。正确做法是初始状态就用占位：

• button { border: 2px solid transparent; box-sizing: border-box; }
• button:focus { border-color: #007bff; }
• 确保全局已设 box-sizing: border-box;，否则 border 加宽会撑大按钮尺寸

:focus-visible 才是兼顾鼠标与键盘用户的正解

只用 :focus 会让鼠标点击后也出现边框，干扰视觉；但全砍 outline 又违反无障碍标准。现代方案是优先用 :focus-visible：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• button:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }
• Chrome 86+、Firefox 89+、Edge 103+、Safari 15.4+ 原生支持；老版本可引入 focus-visible polyfill
• 别写 button:focus { outline: none; } ——这会把键盘用户的 :focus-visible 也干掉
• 微信 WebView 等环境可能忽略纯 CSS :focus-visible，需 fallback 到 JS 监听 focusin 动态加 class

移动端点击无反馈？iOS Safari 需要主动唤醒

iOS Safari 默认压制非交互元素的焦点渲染逻辑，哪怕它是 button，纯 CSS :focus 或 :focus-visible 可能完全不触发。解法不是等系统更新：

立即学习“前端免费学习笔记（深入）”；

• 给 button 加 HTML 属性：ontouchstart=""（空事件即可激活底层聚焦机制）
• 或加 CSS：button { cursor: pointer; }，让系统识别为可点击目标
• 真机测试必须用手点，模拟器常误判；微信内嵌 WebView 还可能需要同时监听 touchstart 和 focus 事件

聚焦边框看似简单，真正落地时最麻烦的是三件事：outline 和 border 的层叠顺序、layout shift 的隐蔽性、以及 iOS 和微信 WebView 对伪类的实际支持程度——这些地方一漏，要么残障用户无法导航，要么真机上完全没效果。