CSS输入框聚焦高亮设置教程

本文深入解析了CSS表单输入框聚焦高亮的实战难点与最佳实践：不仅揭示了为何直接设置`input:focus { border-color: ... }`常失效（因默认`outline`遮挡），更强调必须通过`outline: none`配合`box-shadow`实现既美观又符合可访问性标准的焦点反馈；同时倡导结合`:focus-visible`渐进增强，精准区分键盘导航与鼠标点击场景，并指出`border-style`必须为`solid`等细节才能让颜色过渡动画生效，还特别提醒iOS Safari的聚焦限制及绕过方案——真正聚焦的不是代码技巧，而是对用户多元交互意图（键盘、鼠标、语音、辅助技术）的深度理解与平衡。

input:focus 伪类必须配合 outline: none 才能干净高亮

直接写 input:focus { border-color: #007bff; } 往往没效果，因为浏览器默认的 outline 会盖住边框变化，尤其在 Chrome 和 Firefox 中。不移除 outline，你会看到一个难看的双轮廓（蓝色边框 + 黄色/黑色外发光）。outline 是可访问性必需的，但可以安全替换成更可控的 box-shadow。

• 必须加 outline: none;，否则 border-color 变化被遮挡
• 用 box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25); 替代 outline，既保留视觉反馈又不干扰 border
• 别只设 border-color，要确保 border-style 和 border-width 已定义（比如 border: 1px solid #ced4da;），否则颜色变化无效

聚焦高亮要兼顾可访问性，不能只靠 :focus

仅靠 :focus 无法覆盖键盘用户（Tab 进入）和屏幕阅读器用户的全部场景。部分用户会关闭 outline 但依赖焦点样式导航，所以需要补充 :focus-visible 做渐进增强。

• :focus-visible 只在真实键盘聚焦时触发，鼠标点击后不会激活，体验更自然
• 推荐组合写法：

  input:focus {
    outline: none;
    border-color: #007bff;
  }
  input:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25);
  }

• 注意 Safari 对 :focus-visible 支持较晚（v15.4+），旧版本会回落到纯 :focus

border-color 动画不生效？因为 border-style 不是 solid 或 dashed

想给 border-color 加 transition 却发现没动画？大概率是 border-style 没设对。CSS transition 只对可计算的数值属性生效，而 border-style 是关键字枚举值（如 none, solid），无法插值。

• 确保初始 border 包含 solid：例如 border: 1px solid #ced4da;
• 过渡写法必须明确： transition: border-color 0.15s ease-in-out;（不要写成 transition: all）
• 如果用了 border: none 初始状态，再切到 solid 会触发重排，且无颜色过渡——这是常见坑

移动端 iOS Safari 的 focus 行为很特殊

iOS Safari 默认只有在 <input> 获得焦点且软键盘弹出时才触发 :focus，但很多表单字段（比如 type="search" 或带 readonly 的输入框）可能根本不会弹键盘，导致 :focus 完全不触发。

• 加 inputmode="text" 或移除 readonly 可提升触发概率
• 必要时监听 focusin 事件，动态加 class：

  input.addEventListener('focusin', () => {
    input.classList.add('focused');
  });

• CSS 中用 .focused 替代 :focus，绕过 iOS 的限制

今天关于《CSS输入框聚焦高亮设置教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！