最新發布的Chrome 83 對錶單控件進行了視覺效果的更新，其中對焦點元素的處理引起了眾人的關注，當文本輸入框處於焦點以及選定下拉菜單中的選項時，瀏覽器會在它們周圍顯示一個“黑框”，以突出表單中的這些內容。

而此前的方式是，當諸如<textarea>, <Select> 和<input> 這些表單組件處於焦點時，Chrome 會顯示藍色或橙色的邊框。現在顯示的黑框不僅對用戶造成視覺干擾，還讓開發者感到苦惱，因為Chrome 這個做法並沒有遵守CSS 規則。

對於這個問題，已經有人向Chromium 團隊提交了issue，該issue 的描述為：“自更新表單控件以來，Chrome 似乎忽略了使用邏輯屬性的CSS 邊框規則，總是在<textarea> 等組件處於焦點時顯示黑框”。此問題目前已被標記為“regression”，Chromium 團隊成員進一步表示問題已經得到修復，將在Chrome 84 Dev 中應用修復後的更新。

據了解，此次對錶單控件和焦點元素的更新由微軟 Edge團隊和Chrome團隊合作完成，並已應用到Microsoft Edge 83和Chrome 83中。更新主要體現在可訪問性、觸摸和鍵盤支持等方面。

對於焦點元素的顯示效果，開發團隊本意是希望在任何情況下都能提供良好的可視效果，因為此前焦點元素的outline 屬性採用淺色方案時，如果它恰好位於相似顏色的背景上，則很難被發現。

在更新表單控件的同時，開發團隊為了改進淺色和深色背景下焦點的可見性，焦點顯示器使用了一個粗的暗黑邊框，然後再為焦點元素的outline 屬性加上細的白色邊框。最終就有了上面的焦點元素顯示效果。

如果不想在Chrome 中使用這個“黑框”效果，可以執行以下步驟：

1.打開Chrome

2.在地址欄輸入 chrome://flags/#form-controls-refresh

3.從下拉菜單中選擇”禁用”，然後重啟瀏覽器