应保留 outline 并用 outline-offset 与 box-shadow 实现发光效果，禁用 outline 会损害可访问性；老版 Safari 宜用 border+box-shadow 替代；iOS 需确保 viewport 设置正确并真机测试。
input:focus 伪类配合 outline 实现基础发光
默认情况下，input 获取焦点时浏览器会显示一个系统级 outline（通常是蓝色虚线或实线）。要让它“发光”，关键是用 outline 结合 outline-offset 和 box-shadow。直接覆盖 outline: none 会降低可访问性，不推荐；正确做法是保留 outline 并增强视觉反馈。
-
outline必须设为非none值（哪怕透明），否则部分屏幕阅读器和键盘导航会丢失焦点指示 -
outline-offset控制发光“距离”，常用2px到4px - 真正的“光晕”效果靠
box-shadow实现，例如box-shadow: 0 0 8px rgba(0, 123, 255, 0.5) - 不要只写
outline: 2px solid #007bff—— 这只是加粗边框，不是发光
input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}避免 outline 被意外禁用导致焦点不可见
很多项目全局重置 CSS 时会写 * { outline: none } 或 input { outline: none }，这会让键盘用户完全无法识别当前聚焦元素，属于严重可访问性问题。
- 检查项目中是否在
reset.css或base.css里存在无条件的outline: none - 替代方案：仅对鼠标操作隐藏 outline，保留键盘焦点可见性，用
:focus-visible - 如果必须移除默认 outline，请确保
:focus下有同等明确的替代样式（如高对比度 box-shadow + background 变化）
input:focus:not(:focus-visible) {
outline: none;
}
input:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}兼容老版本 Safari 的 outline 发光写法
Safari 15.4 之前不支持 outline-color: transparent，且对 outline-offset 渲染不稳定。如果需支持较老 Safari，建议放弃纯 outline 方案，改用 box-shadow 主导 + 边框微调。
- 老 Safari 中
outline: 2px solid transparent可能渲染为黑色实线 - 更稳妥的做法：设置
outline: none，再用border配合box-shadow模拟发光 - 注意
border宽度变化会影响布局，建议用box-sizing: border-box统一控制
input {
border: 2px solid #ddd;
box-sizing: border-box;
}
input:focus {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}移动端 iOS Safari 的 focus 触发时机问题
iOS Safari 默认只有在点击可交互元素（如带 onclick 的 div）时才触发 :focus，原生 input 在某些 WebView 或 meta 设置下可能不响应 :focus 样式。
立即学习“前端免费学习笔记（深入）”；
确保页面有
<meta name="viewport" content="width=device-width, initial-scale=1">
html-to-pptx-converter下载使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
避免给
input设置user-scalable=no或touch-action: manipulation测试真机：模拟器有时不触发 focus，但真机上正常
若仍无效，可退而求其次用 JavaScript 监听
focus事件并添加 class不要用
ontouchstart模拟 focus —— 这会破坏表单提交逻辑和屏幕阅读器行为
input.addEventListener('focus', () => {
this.classList.add('focused');
});
input.addEventListener('blur', () => {
this.classList.remove('focused');
});发光效果本身不难，难的是在视觉增强、可访问性、跨端一致性之间找到平衡点。最容易被忽略的是：没有验证 focus 状态是否真实生效（尤其在 iOS 和禁用 JS 的场景下），以及为了“好看”直接干掉 outline 后，让键盘用户彻底迷失。
