应优先用 box-shadow 替代 outline 实现聚焦高亮，配合 focus-visible 区分交互方式，并确保 viewport 正确以解决 ios safari 兼容问题。
input:focus 样式被浏览器默认 outline 覆盖怎么办
很多情况下写好了 input:focus { outline: 2px solid #007bff; }，但实际点击后高亮依然很淡，甚至完全看不见——根本原因是浏览器默认的 outline（比如 Chrome 的蓝色虚线）和你写的样式发生冲突，或者被后续 CSS 规则重置掉了。
- 检查是否全局写了
* { outline: none; }或input { outline: none; }，这是最常见原因 - 确保你的
input:focus规则优先级足够：加!important临时验证（上线前应改用更具体的选择器） - 不要只依赖
outline，它在部分屏幕阅读器中影响可访问性；推荐改用box-shadow模拟聚焦环
用 box-shadow 实现更可控的聚焦高亮
box-shadow 不干扰语义、支持圆角适配、可精确控制模糊度与偏移，比 outline 更适合现代表单。关键是避免硬编码颜色，建议复用设计系统中的 focus 色值。
input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25);
}- 第三个
0是水平偏移，第四个0是垂直偏移，第五个3px是扩散半径，决定“光晕”厚度 -
rgba(0, 123, 191, 0.25)中的透明度控制柔和感；设为1会显得生硬 - 若 input 有
border-radius，box-shadow会自动贴合圆角，而outline永远是直角矩形
focus-visible 只对键盘操作生效，避免鼠标用户误触发
直接给所有 :focus 加强样式，会导致鼠标点击后也出现高亮，干扰视觉节奏。用 :focus-visible 可区分交互方式，提升体验一致性。
input:focus {
outline: none;
}
input:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25);
}- 仅当用户用 Tab 键导航或按 Enter 触发聚焦时，才显示强化样式
- Chrome/Firefox/Edge 均已原生支持；Safari 15.4+ 支持，旧版需加
@supports回退 - 注意：某些自定义组件（如 React 封装的 Input）可能未透传
focus-visible状态，需手动绑定
移动端 iOS Safari 的 focus 样式失效问题
iOS Safari 默认禁用非可点击元素的 focus 样式（包括 input），尤其在无 meta viewport 或缩放被禁用时更明显。
立即学习“前端免费学习笔记（深入）”；
- 确保页面包含正确的 viewport 声明：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 给 input 添加
cursor: pointer或touch-action: manipulation可提升响应可靠性 - 极少数情况需强制触发重绘：在
focus事件中短暂修改style.transform = 'scale(1)'（不推荐，仅作兜底）
聚焦样式的本质不是“看起来更亮”，而是明确告诉用户「当前操作焦点在哪」。最容易被忽略的是可访问性边界：过度隐藏 outline、不用 focus-visible、忽略键盘用户的视觉反馈，都会让屏幕阅读器使用者或键鼠混合操作者失去上下文。
