:focus状态下outline不消失是因浏览器UA样式优先级高或:focus-visible策略干扰；应避免直接outline:none损害可访问性，改用outline:2px solid transparent或自定义样式，并补充-webkit-appearance:none等兼容写法。
focus状态下outline不消失？检查是否被浏览器默认样式覆盖
很多情况下写了 input:focus { outline: none; } 却没效果，不是写错了，而是浏览器的 UA 样式（比如 Chrome 的 :focus-visible 逻辑或 Firefox 的焦点策略）优先级更高，或者你没加 !important ——但更稳妥的做法是用 :focus-visible 精准控制。
- 现代浏览器中，
:focus会匹配所有获得焦点的方式（包括鼠标点击），而:focus-visible只在键盘导航（Tab）时触发，移除它可能损害可访问性 - 如果确定要彻底禁用，推荐组合写法：
input:focus, input:focus-visible { outline: none; } - 某些旧版 Safari 对
:focus-visible支持差，需加前缀或降级为纯:focus
outline:none后键盘用户无法感知焦点？别直接删，换种方式隐藏
直接 outline: none 是最常见也最危险的操作——它让屏幕阅读器和键盘用户完全失去当前操作位置。视觉上“干净”了，但可访问性崩了。
- 替代方案：用
outline: 2px solid transparent或outline-offset: -2px让轮廓不可见但保留渲染占位，不破坏焦点检测 - 更推荐用自定义焦点样式替代删除，例如：
outline: 2px solid #007bff; outline-offset: 2px;，既清晰又可控 - 若项目必须隐藏（如设计稿强约束），至少配合
prefers-reduced-motion和forced-colors媒体查询做兜底
React/Vue里动态表单项失效？注意CSS作用域和渲染时机
框架组件中，input 可能被封装、复用或条件渲染，导致样式未正确挂载或被 scoped CSS 隔离。
- Vue 单文件组件中，
<style scoped>下的:focus规则不会影响子组件内的input，需用::v-deep或提升到全局样式 - React 中若用 CSS-in-JS（如 styled-components），确保选择器能穿透到真实 DOM 节点，避免写成
InputComponent:focus（这是组件名，不是标签） - 动态生成的表单项（如表单数组）可能在 focus 之后才渲染样式规则，建议把 outline 重置逻辑放在基础表单样式层，而非行内
移动端iOS Safari点击后蓝框还在？那是-webkit-focus-ring-color
iOS Safari 默认用 -webkit-focus-ring-color 渲染焦点环，且该颜色不能通过普通 outline-color 覆盖，必须显式声明。
立即学习“前端免费学习笔记（深入）”；
- 关键修复：加上
-webkit-appearance: none;消除部分原生样式干扰 - 完整兼容写法：
outline: none; -webkit-outline: none; -webkit-appearance: none; - 注意：iOS 15.4+ 开始部分输入框（如
type="search"）会忽略outline: none，必须配合appearance: none（标准属性）
