outline-color 单独设置无效，因需同时声明 outline-style 和 outline-width 才能生效；推荐用 outline 简写如 outline: 2px solid #007bff；聚焦样式应兼顾可访问性，优先使用 outline 或 box-shadow 替代，避免仅设 outline: none。
直接改 outline-color 不生效，因为浏览器默认的聚焦轮廓是整体 outline，不是单独的颜色属性；必须用 outline 简写或显式设置三要素（宽度、样式、颜色）才能覆盖。
为什么 outline-color 单独写没用
很多初学者试过 input:focus { outline-color: red; }，但边框还是蓝的——这是因为 outline-color 依赖已有 outline-style 和 outline-width 才能渲染。浏览器默认的 outline 是 outline: -webkit-focus-ring-color auto 5px（Safari/Chrome）或类似值，auto 样式无法被 outline-color 单独接管。
- 必须先声明
outline-style: solid（auto在 Safari 中行为不一致，统一用solid） -
outline-width至少为1px，否则即使设了颜色也看不见 - 推荐直接用简写：
outline: 2px solid #007bff，一劳永逸
input:focus 里该用 border 还是 outline
看你的基础样式：如果输入框本身已有 border（比如 1px solid #ccc），聚焦时优先改 border-color 或加 box-shadow；如果它本就是“无边框”设计（如纯文字下划线式），那就用 outline 更安全——它不占布局空间，不会导致页面跳动。
- 用
border：适合已有边框的场景，改色/加粗即可，需配outline: none避免双轮廓 - 用
outline：适合极简 UI 或需要保持盒模型稳定的情况，记得加outline-offset: 2px控制距离 - Safari 对
outline-style: auto渲染异常，一律写solid
移动端 iOS Safari 焦点轮廓不显示的修复
iOS Safari 默认对表单控件的 outline 渲染非常保守，尤其在点击触发 focus 时，常静默忽略。这不是 bug，是它的 UA 样式策略。
- 加
-webkit-appearance: none可解除部分原生样式封锁 - 确保元素有明确的可聚焦性：不靠
tabindex（input默认可聚焦），但真机测试前可临时加tabindex="0"排查 - 别信模拟器——必须在 iPhone 上用手指点，观察是否出现轮廓或阴影
- 若仍无效，退而求其次：用
box-shadow: 0 0 0 2px #007bff替代outline，iOS 对box-shadow支持更稳
可访问性最容易被跳过的一步
删掉默认蓝边后，很多人就停手了。但键盘用户按 Tab 键时，如果焦点完全不可见，整个表单就对残障用户不可用。
- 不能只写
outline: none就结束，必须补上替代样式 - 替代方案优先级：①
outline: 2px solid #007bff（最轻量、无障碍友好） ②box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.6)（视觉更柔和） - 别用
border替代，除非你确认所有状态（hover/focus/active）下尺寸一致，否则会引发 layout shift - 最后务必手动按
Tab键走一遍表单流程，而不是只看鼠标点击效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
