With the Form Controls refresh, Chrome is now showing a black border everywhere for focused input text fields and selected options in the drop-down on most of the sites.
Generally, Chrome shows blue or orange border for form fields such as <textarea>, <Select>, and <input> on focus. But now it is showing a black border and causing a visual distraction to users. The issue is annoying the developers also as Chrome right now not honoring their CSS rules.
Form Controls Update:
Both Microsoft Edge and Google Chrome teams worked together to bring modern form controls to the Chromium browser.
The updated form controls are rolled out and enabled in current Chrome 83 and Microsoft Edge 83 on Windows, Mac, and Linux.
The form controls are tweaked for accessibility, touch, and keyboard support.
To improve visibility on light and dark background the focus indicator or focus ring now uses a thick dark ring with thin Whiteline. This could be causing the black border right now.
A bug has been created by someone to bring the issue to the Chromium team notice.
“Since form controls refresh, Chrome seems to ignore CSS border rules that use logical properties and always displays the black border around <textarea> components”.
The issue has been acknowledged and confirmed as regression. Chromium employee further confirms the issue doesn’t exist or fixed in Chrome 84 dev.
There are other bugs reported on forms controls black border issue, you can check them here.
Here is the fix you need to apply to Chrome to remove black border
1. Launch Chrome browser
2. Visit chrome://flags/#form-controls-refresh
3. Select Disabled from the drop-down and restart the browser.
Related articles:
Fix Chrome shows black Screen when minimized or maximized
Fix Chrome Shows Black boxes on Screen
Google Fixes YouTube Videos’ Black Screen Issue in Chrome
