17370845950

通过设置css的`outline: none`可消除输入框获得焦点时自动添加的轮廓边框，从而保持搜索栏边框样式始终一致。

在网页开发中，（或任何文本类输入框）在用户点击或聚焦时，浏览器会默认为其添加一个可见的轮廓（outline），通常表现为蓝色或黑色的虚线/实线边框——这是浏览器内置的可访问性焦点指示器。虽然有助于键盘导航用户识别当前焦点元素，但在追求统一视觉设计时，这种默认高亮常与自定义边框样式冲突，导致“边框突变”的问题。

要彻底禁用该行为，只需在CSS中为对应输入框设置：

.searchBar {
  outline: none;
}

或者更通用的写法（适用于所有搜索/文本输入框）：

input[type="search"],
input[type="text"],
input[type="search"]:focus,
input[type="text"]:focus {
  outline: none;
}

⚠️ 重要注意事项：

• outline: none 会完全移除焦点轮廓，可能影响残障用户的键盘导航体验。如需兼顾设计与可访问性，推荐使用 outline: 2px solid transparent 配合 outline-offset，或改用 box-shadow 模拟自定义焦点样式（例如：box-shadow: 0 0 0 2px #007bff;），确保焦点状态依然清晰可辨。
• 不建议仅依赖 :focus 伪类配合 outline: none 而不提供替代焦点反馈——这违反 WCAG 2.1 标准（SC 2.4.7：焦点可见性）。

✅ 最佳实践示例（兼顾美观与可访问性）：

.searchBar {
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 16px;
  /* 移除原生 outline */
  outline: none;
}

/* 提供语义化、高对比度的焦点提示 */
.searchBar:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 195, 0.25);
}

这样既消除了突兀的黑白边框切换，又通过颜色强化与柔和阴影维持了良好的焦点反馈，符合现代前端开发的设计规范与无障碍要求。