如何移除Bootstrap搜索框点击时的边框与轮廓？

你当前的CSS只处理了搜索按钮的样式，但点击时出现的焦点边框/轮廓是来自搜索输入框.searchbar的，而且Bootstrap自带的.form-control控件在:focus状态下会用box-shadow来展示焦点效果，光设置outline: none是不够的。

直接给你可行的解决方案，在现有CSS里添加以下代码：

/* 覆盖搜索输入框的焦点样式 */
.searchbar:focus {
  outline: none !important;
  box-shadow: none !important;
  /* 如果需要彻底移除输入框的普通边框，取消下面这行注释 */
  /* border: none; */
}

/* 你的原有按钮样式可以保留 */
.search-icon{
    border-radius: 0;
    background: transparent;
    color: black;
}
.search-icon:hover{
    border-radius: 0;
    background: transparent;
    color: var(--main-bg-color);
    resize: none;
    outline: none;
}

简单说明：

• !important用来强制覆盖Bootstrap默认的:focus样式优先级
• box-shadow: none是关键——Bootstrap的焦点提示不是用outline，而是用阴影实现的
• 如果你的普通边框还没完全移除，加上border: none即可

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