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