Edge/Chrome 83新表单控件启用黑色边框 给用户和开发者带来困扰

伴随着Edge/Chrome 83对表单控件的更新，这些基于Chromium的浏览器目前在访问大多数网站下拉菜单中的焦点输入文本字段和已选定的选项都会显示黑色边框。通常情况下，Chrome浏览器在聚焦的时候、以及 等表单字段会显示蓝色或者橙色边框。

不过现在Chrome显示了黑色的边框，给用户带来了视觉上的困扰。这个问题也让开发者比较苦恼，因为Chrome浏览器并没有遵守谷歌自己设定的CSS规则。

Microsoft Edge和Google Chrome团队合作，为开源浏览器Chromium带来了更现代化的表单控件。更新后的表单控件已经在目前的Chrome 83和Edge 83版本中上线，此外对轻松访问、触控和键盘操作进行了优化。但是刷新后的表单控件这个黑色边框引起了用户和开发者的困扰。

 

为了提高明暗背景下的可见性，焦点指示器或焦点环现在使用了一个厚厚的暗环，并加入了较薄的白线。这可能是造成现在的黑边框的原因。已经有人创建了一个bug，将这个问题提交给Chromium团队审核。

该问题描述为：“自从表单控件刷新以来，Chrome似乎忽略了使用逻辑属性的CSS边框规则，总是在组件周围显示黑色边框”。目前这个问题已经标记为“regression”，Chromium团队成员进一步表示这个问题已经得到修复，在Chrome 84 Dev通道版本中已经不存在了。

如果你想要在Chrome浏览器中移除这个黑边框，可以按照以下步骤进行

1. 启动Chrome浏览器

2. 访问chrome://flags/#form-controls-refresh。

3. 从下拉菜单中选择 "禁用"，然后重新启动浏览器。

但作为开发者往往不是需要这个操作而是需要样式覆盖

类似于：

input:focus{outline: none;border: 1px solid #4f95e2;}
button:focus{outline: none;border:1px solid #4f95e2;}
textarea:focus{outline: none;border:1px solid #4f95e2;}
select:focus{outline: none;border: 1px solid #4f95e2;}
option:focus{outline: none;border:1px solid #4f95e2;}