通过设置 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 */
}

⚠️ 重要注意事项：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 直接全局设置 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。

立即学习“前端免费学习笔记（深入）”；