Chrome 83 對表單控制項和焦點元素的更新被吐槽

2020-12-11 開源中國

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

相關焦點

  • 谷歌Chrome 83 對表單控制項和焦點元素的更新被吐槽
    最新發布的 Chrome 83 對表單控制項進行了視覺效果的更新，其中對焦點元素的處理引起了眾人的關注，當文本輸入框處於焦點以及選定下拉菜單中的選項時，瀏覽器會在它們周圍顯示一個「黑框」，以突出表單中的這些內容。
  • Chrome 83 Beta 發布:與 Edge 合作改進的表單控制項
    和 Windows。HTML 表單控制項為大多數 Web 交互提供了基礎。但表單控制項的樣式完全不一致。最早的窗體控制項與所使用的作業系統匹配，後來的控制項則遵循了創建它們時流行的設計風格。這種變化迫使開發人員花費更多的時間並交付額外的代碼。在過去的一年中，Chrome 和 Edge 進行了合作，以改善 HTML 表單控制項的外觀和功能。這項工作包括使控制項和其他交互元素的集中狀態更容易感知。下圖顯示了 Chrome 中某些控制項的新舊版本對比（左舊右新）。
  • 谷歌Chrome 83 Beta 發布:與 Edge 合作改進的表單控制項
    Google 發布了最新的 Chrome 83 beta 版本，適用於 Android、Chrome OS、Linux、macOS 和 Windows。改進表單控制項HTML 表單控制項為大多數 Web 交互提供了基礎。它們易於開發人員使用，具有內置的可訪問性。但表單控制項的樣式完全不一致。
  • Chrome 83 穩定版發布:新的跨域政策、表單控制項,和改進的 Web 體驗
    Chrome 83 穩定版發布了，以下是最主要的更新內容： 可信類型（Trusted types），有助於防止跨站點腳本漏洞
  • 谷歌Chrome 83 穩定版正式發布:新跨域政策、表單控制項,改進 Web 體驗
    Chrome 83 穩定版發布了，以下是最主要的更新內容：可信類型（Trusted types）基於 DOM 的跨站點腳本（DOM XSS）是最常見的 Web 安全漏洞之一。`;// Will throw a TypeError相替代地，需要使用諸如 textContent 之類的安全函數，傳入可信類型，或者創建該元素並使用appendChild()。
  • 谷歌Chrome 與 微軟 Edge 合作改善表單控制項 UI 及體驗
    IT之家3月31日消息 據Chromium官方博客，在過去的一年中，Google Chrome團隊和微軟Edge團隊合作，「對Chromium瀏覽器中的內置表單控制項進行了主體化和改進」，改善了按鈕、下拉菜單、複選框等HTML控制項的UI及體驗。
  • [下載]Chrome Canary 77最新版:啟用全局多媒體控制項UI
    不過在即將到來的Chrome 77中谷歌引入了「全局媒體控制項UI」（Global Media Controls UI，簡稱GMC），不再需要多媒體按鍵也不會立刻消失，只需要點擊工具欄上的圖標即可播放YouTube視頻。
  • 微軟谷歌增強合作 共同推進Chromium的現代化表單控制項
    微軟正和谷歌的Chrome團隊緊密合作，共同開發基於Chromium的現代化表單控制項。 在過去幾個月中，微軟一直在研究探索表單控制項現代化的方法，以嘗試更新包括日期選擇器之類的網頁UI元素設計。根據雙方合作的設想，Chromium的現代化網頁控制項能對觸控和輔助功能友好。微軟表示，計劃在即將到來的Chromium預覽版引入重新設計的控制項，而其他基於Chromium的瀏覽器也將會獲得這些改進。通過Chromium中改進的表單控制項支持，Microsoft希望在整個平臺上提供設計和用戶體驗的連續性。
  • E圖表述:Excel控制項、二:表單控制項-組合框、列表框
    無論是表單控制項還是ActiveX控制項，作者都認為，組合框和列表框都應該放在一起說。先看一下它們長什麼樣子吧。在用這兩個控制項的過程中，作者覺得這兩個控制項基本沒有什麼區別（尤其是表單控制項）。如果非要說它們倆不一樣的地方，那就是列表框是展開的列表，而組合框是下拉式的列表。
  • HTML+CSS:常用表單控制項之單選框、多選框、下拉框的介紹
    上一篇文章我們說了單行文本框和多行文本框，今天呢我們繼續看一下表單的其它控制項：單選框、複選框、下拉框。（1）單選框和複選框在我們表單頁面中，經常會有選擇性別或者選擇愛好這類的內容，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和複選框，兩者的區別是單選框中的選項用戶只能選擇一項，而複選框中用戶可以任意選擇多項，甚至全選。
  • 谷歌Chrome 81瀏覽器將用上微軟Chromium現代Web控制項
    去年，谷歌同意用微軟的解決方案更新Chrome，以延長電池續航，可以減少瀏覽器在Windows上過多的電池消耗。微軟還一直在其Edge瀏覽器和Chromium平臺中嘗試使用更新或現代的Web控制項。Web控制項實際上是文本框、項目符號列表、複選框、日曆、密碼顯示程序以及你在許多網頁中看到的其他元素。
  • Excel 中如何枚舉表單控制項,vba 編程學習
    做Excel 表格的時候，會有一些高級功能，需要添加一些表單控制項或Activex控制項來增加表格的操作性。有時候，我們需要對表單控制項進行操作，那麼如何來一一枚舉出這些控制項呢？下面介紹一下，枚舉方法：表單控制項類型要判斷表內shape對象type是否是msoFormControl代碼：If shp.Type = msoFormControl Then然後再判斷表單類型 FormControlType
  • 谷歌Chrome 81瀏覽器將用上微軟Chromium版Edge現代Web控制項
    微軟還一直在其Edge瀏覽器和Chromium平臺中嘗試使用更新或現代的Web控制項。Web控制項實際上是文本框、項目符號列表、複選框、日曆、密碼顯示程序以及你在許多網頁中看到的其他元素。　　去年，微軟在Chromium中實施了新控制項，以在所有網頁上提供現代的網頁外觀設計。在Windows 10的Edge瀏覽器中也啟用了這些更改，以實現現代外觀、觸摸友好性和改進的可訪問性。
  • 26 HTML5中新增的表單控制項
    前面兩篇圖文介紹的表單控制項，都是HTML4版本中就已經存在的表單控制項，不過它們同樣在HTML5規範中被兼容，而今天這一篇圖文介紹的這些表單控制項，都是在HTML5中新增的。在HTML5中新增的表單控制項，主要有下圖所示的這些，input標籤的type屬性不同的值，表示不同的控制項。
  • WebBrowser控制項自動提交表單
    這個效果稍做改變，加個循環，就可以實現批量填入網頁表單數據，並自動提交。（備註：公司內部的表單一般是不會有驗證碼的，所以暫時不用考慮識別驗證碼的工作。）這就是WebBrowser控制項的強大之處。下面就教大家如何實現上述網頁自動化的效果。
  • 10天學會php第三天表單控制項的使用
    昨天我們介紹了html標籤的使用，今天介紹表單控制項的使用，表單控制項常用於網站留言，互動作用。網站留言上圖就是網站常見的留言效果，就是在表單的基礎上進行css美化。我們先學習一下最基礎的知識，看看默認的表單是什麼樣子
  • 精華帖 | Excel插入控制項(表單控制項和ActiveX控制項)妙招
    通常情況下，我們需要在Excel界面插入一些控制項，讓這些控制項指定VBA界面中的代碼，以實現在Excel界面控制VBA代碼（或宏）的運行或停止。但是，在Excel默認界面功能區根本找不到插入控制項命令按鈕，所以我們需要一些技巧來調出需要的控制項命令，本教程以Excel2013為例，介紹兩種添加控制項的技巧，希望對大家有點幫助。
  • HTML+CSS:使用form表單控制項,與用戶交互
    今天這篇文章我們主要來看一下表單的控制項都有哪些，如何使用表單標籤，與用戶交互。（1）網站怎樣與用戶進行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到伺服器端，這樣伺服器端程序就可以處理表單傳過來的數據。
  • 前端入門須知:輕鬆學會form表單製作!
    表單是由窗體和控制項組成的,一個表單一般應該包含用戶填寫信息的輸入框,提交按鈕等，這些輸入框,按鈕叫做控制項,表單很像容器,它能夠容納各種各樣的控制項。二、表單元素一個完整的表單包含三個基本組成部分：表單標籤、表單域、表單按鈕。
  • Bootstrap3.0學習第六輪:表單
    所有設置了.form-control的<input>、<textarea>和<select>元素都將被默認設置為width: 100%;。將label和前面提到的這些控制項包裹在.form-group中可以獲得最好的排列。