点击搜索框时浏览器自动添加的蓝色或黑色轮廓边框（outline）会破坏设计一致性；通过 css 设置 `outline: none` 即可彻底禁用该默认焦点样式，同时建议配合 `:focus` 状态自定义更友好的视觉反馈。
在 Web 开发中，<input type="search"> 或其他表单元素在获得焦点（例如用户点击或 Tab 键聚焦）时，现代浏览器（Chrome、Firefox、Edge 等）会默认渲染一个高亮的 outline（通常是蓝色或深色轮廓），这是出于可访问性考虑的原生行为。但该样式常与自定义 UI 冲突，导致视觉跳变——正如你在点击搜索栏时观察到的“黑白色边框”变化。
要稳定边框样式，核心解决方案是重置 outline 属性：
.searchBar {
outline: none; /* 移除默认焦点轮廓 */
border: 2px solid #ccc; /* 显式定义你期望的边框 */
border-radius: 4px;
padding: 8px 12px;
font-size: 16px;
}⚠️ 重要提示：仅设 outline: none 不够专业
完全移除 outline 可能损害键盘用户的可访问性（无法识别当前聚焦元素）。推荐做法是：保留视觉反馈，但用更可控的方式实现。例如：
.searchBar {
border: 2px solid #ddd;
outline: none;
}
.searchBar:focus {
border-color: #007bff; /* 自定义焦点边框色 */
box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25); /* 可选：柔和外发光 */
/* 避免使用 outline: auto 或 outline: 0 —— 后者在部分旧浏览器中无效 */
}此外，若需全局控制所有输入框，可使用属性选择器增强精度：
input[type="search"],
input[type="text"],
input[type="email"] {
outline: none;
}最后，请注意：你的 JavaScript 中使用 alert() 并依赖 alertOnce 计数器存在副作用——它会中断用户操作流、阻塞页面交互，且不符合现代 UX 规范。如需提示，建议改用非模态 Toast 提示或内联帮助文本。
立即学习“前端免费学习笔记（深入）”；
总结：
✅ 正确做法：用 outline: none + :focus 自定义样式替代默认轮廓；
✅ 最佳实践：确保焦点状态仍具备清晰、符合品牌色的视觉反馈；
❌ 避免：全局无差别 outline: 0 或完全移除所有焦点指示（违反 WCAG 可访问性标准）。
