项目场景:
Vue3 + Element Plus
问题描述
本人在使用Vue3 + Element Plus开发项目时,输入框和下拉菜单的icon上莫名其妙会出现如下的黑框:
当鼠标悬停时,下拉菜单的icon会出现一个黑框

当选中输入框时,也会出现黑框

原因分析:
Element Plus组件样式导致
解决方案:
在自己的组件直接去除:
input {
outline: none !important;
}
在element组件中伪类去除:
.el-menu:focus {
outline: none;
}
.el-menu将换成需要去掉黑框的组件类名即可。