应优先用 border-color 控制聚焦边框颜色并禁用默认 box-shadow，避免 outline 被覆盖；统一设置细边框与克制圆角提升视觉协调性；确保 type="submit" 和 pointer-events 正确以保障功能；深色模式下用主色 border 加透明阴影替代 outline，并保留无障碍焦点。
搜索框聚焦时边框变色但背景不变，为什么加了 outline 还是没效果？
因为 Bootstrap 默认用 box-shadow 模拟焦点高亮（尤其在 .form-control:focus 中），会盖住你手动写的 outline。直接覆盖它比硬调 outline 更可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
border-color控制聚焦边框颜色，而不是依赖outline - 必须禁用默认阴影：加
box-shadow: none !important; - 如果真要用
outline（比如做双线效果），得同时设outline-offset: 2px避免重叠
想让搜索框始终显示细实线边框，但 Bootstrap 的 border-radius 让它看起来不协调
Bootstrap 5 的 .form-control 默认带 border-radius: 0.375rem，和细边框搭配容易显得“头重脚轻”。关键不是删圆角，而是同步调整边框粗细与视觉权重。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一设
border: 1px solid #ced4da;（Bootstrap 默认灰色） - 把
border-radius改成4px或2px，比默认值更克制 - 避免用
border: 0后只靠outline显边框——键盘导航用户会看不见焦点
自定义后按回车没反应，或点击放大镜图标不触发搜索
这不是样式问题，是事件绑定被干扰。常见于用 input-group 包裹搜索框时，对 .input-group-text 做了 pointer-events: none 或误删了 <button type="submit"></button> 的 type 属性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查按钮是否保留
type="submit"，否则不会触发表单提交 - 若用了自定义图标（如 Font Awesome），确保父容器没设
pointer-events: none - 聚焦态的
border和outline不影响功能，但改display或position可能导致点击区域偏移
在深色主题下搜索框边框发灰看不清，outline 又总带浏览器默认蓝光
深色背景上，默认 outline 是浅蓝，对比度不足且风格突兀；而 border 可控性更强，也更符合设计一致性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 彻底放弃
outline，用border+box-shadow组合模拟焦点（例如box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);） - 深色模式下，聚焦边框推荐用
#0d6efd（Bootstrap 主色）而非默认#86b7fe，更醒目 - 别用
outline: none粗暴移除——改用outline: 2px solid transparent保无障碍支持
outline 被干掉又没补替代方案，对部分用户就是不可用。 
