必须显式设置 outline: none 或 outline: 0 才能移除默认蓝色焦点边框，但需补全可访问的替代样式（如 outline: 2px solid #007bff），因 outline 不占布局空间、更符合无障碍规范，且 Safari 建议用 solid 替代 auto。
focus伪类改不了默认蓝边？先关掉outline
浏览器对 input、textarea 等表单元素加的蓝色焦点边框，本质是 outline，不是 border。直接写 border: 2px solid red 没用，它压根不覆盖 outline。
- 必须显式设置
outline: none或outline: 0才能移除默认轮廓 - 但别只写
outline: none就完事——键盘用户依赖视觉焦点提示，去掉后要补上可访问的替代样式 - 推荐用
outline: 2px solid #007bff替代，比纯border更符合无障碍规范（outline 不占布局空间，不会导致页面跳动）
input:focus 里该用 border 还是 outline？
两者用途不同：border 影响盒模型尺寸，outline 是“浮”在元素外的装饰线，不影响布局。
- 如果已用
border做正常态边框，焦点时想加粗或变色，优先改border-color或border-width，避免 layout shift - 如果正常态没边框（比如纯文字输入框），用
outline更安全，尤其配合outline-offset控制距离 - 注意 Safari 对
outline-style: auto的渲染特殊，统一设成solid更可控
为什么加了 :focus 样式却没生效？
常见原因是选择器权重不够，或者被更高优先级规则覆盖（比如浏览器内置样式、框架 CSS、内联 style）。
- 检查是否被
!important强制覆盖——优先改选择器，而不是堆!important - 确保选择器包含足够 specificity，例如用
input[type="text"]:focus比单纯input:focus更稳 - 某些 UI 库（如 Bootstrap）会重置 focus 样式，得在它们的 CSS 后加载自定义规则，或提高权重（如加
body前缀）
移动端 focus 边框不显示？iOS Safari 的坑
iOS Safari 默认禁用非可点击元素的 focus 样式，表单控件虽可聚焦，但 outline 可能被忽略或渲染异常。
立即学习“前端免费学习笔记（深入）”；
- 给
input加role="textbox"或确保有tabindex="0"（一般不需要，但调试时可试） - 加
-webkit-appearance: none可解除部分 iOS 默认样式干扰 - 真机测试必做：模拟器常显示正常，但 iPhone 实际点击可能无反馈
