[Fix] Google Chrome Showing Thick Black Border Highlight on Text Box and Other Focused Items

Many Google Chrome and Microsoft Edge users have reported us that suddenly their browser started showing thick black border around text fields, drop-down boxes, buttons, etc items on web pages.

As soon as users click inside a text box to type something or click on a drop-down box or buttons, Google Chrome and Microsoft Edge highlight the focused control using a dark black border.

Following screenshots show the black border problem in Google Chrome web browser:

Many site developers are finding it annoying as the black border is not respecting their predefined CSS border rules.

Actually it’s not an issue or problem. Newer versions of Chromium come with updated version of form controls and focus. Since both Google Chrome and Microsoft Edge browsers are based on Chromium, both browsers are causing this issue.

Chromium team has updated form controls look-n-feel to bring touch support and consistency among all form controls. That’s why whenever a user clicks inside text field or clicks on drop-down boxes, buttons, etc, a black border is displayed to highlight the focus. It has been done to help users in easily finding the focused item on a web page. I think it’s a good feature addition if we talk about accessibility.

There are many Chrome and Edge users who are finding this black border highlight feature very annoying and irritating. Fortunately, both Google Chrome and Microsoft Edge come with a built-in preference/flag to disable the new updated form control refresh design.

Once you disable the new design feature, the black border highlighting will be removed immediately and you’ll get the previous UI of form controls and elements back.

Following steps will help you in getting rid of black border around form controls on web pages in Google Chrome and Microsoft Edge web browsers:

1. Open Google Chrome or Microsoft Edge web browser and type chrome://flags/ in addressbar and press Enter. It’ll open the advanced configuration page.

2. Now type form controls in the “Search flags” box.

It’ll directly go to following option:

3. To disable new black border highlighting feature, select Disabled for Web Platform Controls updated UI option from the drop-down box.

4. Your web browser will ask to restart. Click on “Relaunch now” button to restart the browser.

That’s it. After relaunching the browser, open any webpage and you’ll no longer see black border highlighting on any form control element.

PS: If you decide to restore the feature, select “Default” option from the drop-down box and restart the browser.

UPDATE:

If the above mentioned method doesn’t help you, check out following new working method to disable or remove black border outline around text input boxes:

[Tip] How to Remove Black Border Outline When You Click inside Text Input Box in Google Chrome

Also Check:

[Windows 10 Tip] Remove Thick Highlight Border from Focused Items