HTML输入框聚焦出现多余白色双层轮廓的原因及解决方法

多余的白色轮廓是浏览器对表单输入框默认焦点样式的内置渲染效果：

• 你仅修改了聚焦状态的outline-color为红色，但没有覆盖outline-style的默认值auto。outline-style: auto不是普通的纯色描边，是浏览器自带的高对比度焦点提示方案，会自动在描边内侧叠加一层和周边颜色形成反差的白色边缘，保证焦点状态在任意背景下都能被清晰识别，这层白边是浏览器内置逻辑生成的，不会随outline-color的设置改变。
• 补充：你当前代码仅在hover状态修改了搜索框宽度，没有加过渡动画，宽度变化会比较生硬，属于独立的体验问题，和白轮廓无关。

二选一即可：

方案1：保留outline，改为纯色描边模式 #

直接在聚焦状态把outline简写为solid纯色样式，覆盖默认的auto渲染逻辑，就只会显示你设置的红色轮廓：

.Search-bar:focus{
  outline: 2px solid red;
  /* 如需调整轮廓和输入框边框的间距，可追加 outline-offset: 数值; 例如 outline-offset: 2px; */
}

方案2：清除默认outline，自定义焦点样式（适配圆角设计更推荐） #

默认outline是直角样式，和你搜索框的15px圆角不匹配，可以清除原生outline后用box-shadow实现贴合圆角的焦点效果：

.Search-bar:focus{
  outline: none;
  box-shadow: 0 0 0 2px red; /* 四个数值分别是x偏移、y偏移、模糊度、扩散半径，最后一个值是颜色 */
}

注意：不要只设置outline: none不加任何替代焦点样式，会破坏键盘导航的可访问性，键盘操作用户和屏幕阅读器用户需要明确的焦点位置提示。

内容的提问来源于stack exchange，提问作者AayushPokharel