清除新版Google Chrome浏览器中表单控件（input，button...）默认的黑色边框

今天在chrome浏览器上测试项目时，突然发现所有的表单控件在鼠标选中后都被加上了一个奇怪的黑色边框，嗯！？

翻了半天css文件后，确定应该是chrome浏览器的问题。

遇到问题先找度娘是个好习惯~🐶

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

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

哎，黑框它还在…我们还是靠自己去解决吧~ - ~

方法 ① ：

我们可以在每个表单控件的css样式中添加如下一行：

outline:none;

这行代码作用是去掉表单元素获取焦点后自动添加的边框，不管它是现在的黑色，还是原来的蓝色或黄色，统统不显示！

方法 ② ：（不推荐）

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

进行如图设置，禁用掉 Web Platform Controls updated UI 这项更新，然后重启chrome即可。
这个方法仅针对最近出现的黑色边框的问题，然而chrome浏览器对表单控件有自己的默认样式，这个方法只是把原本的黑色边框变成了蓝色—_—

简直无语…
默默敲下一行代码：outline:none;