如何移除搜索框输入内容时自动出现的蓝色边框？

我有一个搜索框，未点击时的显示效果如下图：

但只要在其中输入内容，就会出现蓝色边框，我不想要这个效果但不知道如何移除，出现蓝色边框的效果如下图：

以下是对应的CSS文件代码：

body{
    background: whitesmoke;
}
.header{
    display: flex;
    /* width:50%; */
    align-items:center;
    justify-content: space-around;
    border-bottom: 1px solid whitesmoke;
}

.header-middle {
    display:flex;
    flex:0.5;
    align-items: center;
    background-color: white;
    padding: 5px;
    margin-top: 10px;
    border-radius: 10px;
}

.header-middle > .MuiSvgIcon-root {
    color: grey;
    background: transparent;
}

.header-middle > input {
    border:none;
    width:100%;
    padding:10px;
    outline-width: 0;
    font-size: medium;
    background-color: white;
}

解决方法 #

这个蓝色边框是浏览器和Material UI组件库为聚焦状态的输入框默认添加的高亮样式，你当前只设置了outline-width: 0，没有覆盖全部默认规则，修改.header-middle > input的CSS规则即可解决：

1. 用outline: none;替换原有outline-width: 0，兼容性更强，可以彻底移除默认外轮廓
2. 新增box-shadow: none;，移除默认添加的蓝色聚焦阴影，如果样式被Material UI的默认规则覆盖，可以加!important提升优先级

修改后的完整输入框样式如下：

.header-middle > input {
    border:none;
    width:100%;
    padding:10px;
    outline: none;
    box-shadow: none;
    font-size: medium;
    background-color: white;
}

提示：如果需要兼顾可访问性，建议移除默认高亮后补充自定义的聚焦状态提示（比如淡灰色边框），方便障碍用户识别输入框状态

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