伴随着 Edge/Chrome 83 对表单控件的更新,这些基于 Chromium 的浏览器目前在访问大多数网站下拉菜单中的焦点输入文本字段和已选定的选项都会显示黑色边框。通常情况下,Chrome 浏览器在聚焦的时候<textarea>、<Select>以及<input> 等表单字段会显示蓝色或者橙色边框。
不过现在 Chrome 显示了黑色的边框,给用户带来了视觉上的困扰。这个问题也让开发者比较苦恼,因为 Chrome 浏览器并没有遵守谷歌自己设定的 CSS 规则。
Microsoft Edge 和 Google Chrome 团队合作,为开源浏览器 Chromium 带来了更现代化的表单控件。更新后的表单控件已经在目前的 Chrome 83 和 Edge 83 版本中上线,此外对轻松访问、触控和键盘操作进行了优化。但是刷新后的表单控件这个黑色边框引起了用户和开发者的困扰。
为了提高明暗背景下的可见性,焦点指示器或焦点环现在使用了一个厚厚的暗环,并加入了较薄的白线。这可能是造成现在的黑边框的原因。已经有人创建了一个 bug,将这个问题提交给 Chromium 团队审核。
该问题描述为:“自从表单控件刷新以来,Chrome 似乎忽略了使用逻辑属性的 CSS 边框规则,总是在<textarea>组件周围显示黑色边框”。目前这个问题已经标记为“regression”,Chromium 团队成员进一步表示这个问题已经得到修复,在 Chrome 84 Dev 通道版本中已经不存在了。
如果你想要在 Chrome 浏览器中移除这个黑边框,可以按照以下步骤进行:
1. 启动 Chrome 浏览器
2. 访问 chrome://flags/#form-controls-refresh。
3. 从下拉菜单中选择 “禁用”,然后重新启动浏览器。