CSS focus伪类提升输入框视觉焦点技巧

• 适用场景：带标签、提示文字、错误信息的复合表单区域，比如登录页的邮箱输入区
• 和 :focus 最大区别是：它不依赖当前元素本身聚焦，而是“容器内任一可聚焦子元素聚焦”就触发
• 兼容性要注意：IE 完全不支持，Safari 从 15.4+ 才稳定，如需兼容老版本得 fallback 到 JS 监听 focusin 事件
• 示例：.form-group:focus-within label { color: #007bff; } —— 输入框一聚焦，对应 label 马上变色

focus-visible 是不是可以替代 JS？小心默认行为差异

:focus-visible 的目标很明确：只在用户**用键盘操作**（Tab/Shift+Tab）聚焦时生效，鼠标点击时不触发。但它不是“开箱即用”的平替方案。

• 它不会自动禁用鼠标点击下的 :focus，需要手动把 :focus 改成 :focus:not(:focus-visible) 来隔离样式
• Chrome 和 Firefox 行为基本一致，但 Safari 对某些元素（如自定义 contenteditable）识别不准，容易漏触发
• 如果你用了 outline: none 又没配 :focus-visible，键盘用户会彻底丢失焦点位置——这是最常被忽略的可访问性断裂点
• 推荐组合：input:focus { outline: none; } input:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }

移动端 focus 样式失效？iOS Safari 的特殊限制

iOS Safari 默认禁止非可交互元素（比如 div、span）获得焦点，连 tabindex 都不一定管用；而且软键盘弹出后，焦点样式可能被系统 UI 覆盖或重置。

• 确保目标元素有 tabindex="0"，且没有 -webkit-user-select: none 这类阻止交互的样式
• 不要依赖 :focus 做关键状态反馈（比如必填校验提示），改用 JS 监听 focus 事件 + 添加 class 更可靠
• 在 meta viewport 中避免 user-scalable=no，否则部分 iOS 版本会抑制焦点样式渲染
• 测试时务必真机连接 Safari 开发者工具，模拟器经常无法复现真实焦点行为

终于介绍完啦！小伙伴们，这篇关于《CSS focus伪类提升输入框视觉焦点技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！