清除chrome浏览器表单、elementUI 抽屉组件 默认黑框

问题

部署好的项目在chrome中打开，出现了黑色边框。界面用的是elementUI，使用抽屉组件是出现了这种情况，其他的表单组件均正常

原因

通过搜索资料，确定是chrome浏览器本身问题。
资料显示这是最近chrome浏览器更新83新版本产生的问题：
Chrome83版本对表单控件进行了视觉效果的更新，当文本输入框处于焦点以及选定下拉菜单中的选项时，浏览器会在它们周围显示一个“黑框”，以突出表单中的这些内容。

后来在CSDN上看见有个童鞋发帖说：这个问题已经反馈给了Google，在Chrome84 Dev中已经将该问题解决，按道理说等84版本更新后问题就会消失。
然鹅…我去更新了84版本——

哎，黑框它还在…我们还是靠自己去解决吧~ - ~
方法 ① ：
我们可以在每个表单控件的css样式中添加如下一行：

outline:none;

这行代码作用是去掉表单元素获取焦点后自动添加的边框.

方法 ② ：（不推荐）
进入chrome浏览器的实验室界面修改相关设置。
地址为：chrome://flags/#form-controls-refresh （当然用chrome打开）

进行如图设置，禁用掉 Web Platform Controls updated UI 这项更新，然后重启chrome即可。
这个方法治标不治本，你无法修改客户打开网页所使用的浏览器。在其他电脑上仍会有问题。方法1才是真爱。
本文章参考链接：https://blog.csdn.net/JZevin/article/details/107371372