通过设置 css 的 `outline: none` 可彻底禁用输入框（如 search 类型）获得焦点时自动添加的浏览器默认外边框高亮，从而保持边框样式始终一致。
在网页开发中，<input type="search"> 或其他文本类输入框（如 text、email）在被点击或聚焦（focus）时，多数浏览器（Chrome、Firefox、Safari 等）会自动为其添加一个醒目的轮廓线（outline），通常为蓝色或黑色虚线/实线——这是浏览器内置的可访问性焦点指示器，用于辅助键盘导航用户识别当前激活元素。但该默认行为常与自定义 UI 设计冲突，导致“点击后边框突变”的视觉问题。
要消除这一变化，只需在 CSS 中重置 outline 属性：
.searchBar {
outline: none;
}✅ 推荐写法（更安全）：
为避免影响可访问性，建议仅在有明确替代焦点样式的前提下使用 outline: none，例如同时定义 :focus 状态下的边框或阴影：
.searchBar {
border: 2px solid #ccc;
padding: 8px 12px;
border-radius: 4px;
transition: border-color 0.2s ease;
}
.searchBar:focus {
outline: none;
border-color: #007bff; /* 自定义聚焦边框色 */
box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.2); /* 可选：提供视觉反馈替代 outline */
}⚠️ 重要注意事项：
- 直接全局设置 input { outline: none; } 可能降低键盘用户的可访问性（如 Tab 导航时无法识别焦点位置），应尽量限定选择器范围（如 .searchBar）；
- 若需兼顾无障碍（a11y），推荐使用 :focus-visible 配合 outline: none，仅对鼠标/触控操作隐藏 outline，保留键盘焦点可见性（现代浏览器支持）：
.searchBar:focus {
outline: none;
}
.searchBar:focus-visible {
outline: 2px solid #007bff;
}最后，请确保你的 JavaScript 逻辑（如 alertOnce 计数）不依赖于 click 事件来判断聚焦状态——click 和 focus 是两个不同事件；若需监听聚焦，应使用 focus 事件而非 click。
立即学习“前端免费学习笔记（深入）”；
