input:focus 没反应是因为默认 outline 覆盖了自定义边框，需设 outline: none 并用 box-shadow 或 border-color 替代以兼顾可访问性与视觉效果。
input:focus 为什么加了没反应？
默认情况下，input:focus 能生效，但你可能看不到变化——因为浏览器给 input 设了默认 outline，它会盖住你写的 border 样式。不是选择器错了，是 outline 在“抢戏”。
- 必须显式设置
outline: none或outline: 0才能让你的边框样式露出来 -
outline是可访问性关键属性，删掉后务必用其他方式（比如box-shadow）提供视觉焦点提示 - 某些浏览器（如 Safari）对
outline的默认行为更顽固，建议加outline-offset: -2px配合调整位置
用 border 修改聚焦边框时的常见翻车点
直接改 border 看似简单，但容易导致布局抖动或颜色突兀。根本原因是：默认 border 和聚焦时 border 的宽度、样式、颜色不一致，浏览器会重绘框模型。
- 聚焦前后
border-width必须一致，否则元素尺寸会变（比如从1px solid #ccc切到2px solid #007bff） - 推荐用
border-color单独变化，或用box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25)模拟“外发光”，不干扰布局 - 别只写
input:focus { border: 2px solid #007bff }—— 这会覆盖掉默认的border-style和border-color，导致非聚焦态边框消失
Chrome/Firefox/Safari 对 outline 的兼容差异
outline 行为在各浏览器中并不统一，尤其在表单控件上。Safari 默认禁用 outline 的自动聚焦高亮，Firefox 对 outline-offset 支持更严格。
- Chrome 允许
outline: none彻底移除，但会丢失键盘导航用户的焦点指示 - Firefox 中
outline: 0不等价于outline: none，后者才真正移除；前者只是设为 0 宽度，仍占渲染空间 - 跨浏览器稳妥写法：
input:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); }，再加outline-offset: -2px微调位置
要不要完全去掉 outline？
去掉 outline 不是技术问题，是可访问性红线。键盘用户依赖它定位当前焦点，强行清空等于让部分用户“看不见光标”。
立即学习“前端免费学习笔记（深入）”；
- 如果设计稿要求“无 outline”，请用
box-shadow或border提供同等清晰的视觉反馈，且确保对比度 ≥ 4.5:1 - 测试方法：Tab 键遍历页面，确认每个
input获得焦点时都有明确、不闪烁、不遮挡内容的提示 - 最常被忽略的一点：暗色主题下，
rgba(0, 123, 255, 0.25)可能不够显眼，需配合@media (prefers-color-scheme: dark)调整阴影颜色
