最新發布的 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.從下拉選單中選擇 "禁用",然後重啟瀏覽器
[admin
]