Google Chrome showing black border on focus state for button user agent styles

user_5935306 0
Viewed 42040

Recently i was working on a web design project, and noticed something odd, after the last Google Chrome update. The default border style(user agent style) for button is changed, and which is looking visually annoying to me.

Is there any method to modify/restore the default browser styles, i.e., user agent styles permanently?

here are some images of the problem: self developed web page button

state of border color on click/focus

i have also checked other websites and even google browsing on google images

other example

also checked the dev tool, found this border styles applied on the focus state of the button also checked the dev tool, found this border styles applied on the focus state of the button

google-chrome-devtools google-chrome css
7 Answers
user_59026910
user_96843170

The issue isn't Chromium's new contrasting focus ring, it's the default behavior across browsers that clicking triggers the focus ring.

The focus ring appears on click when the <button> appearance is altered or receives tabindex attribute.

Accessibility is a must and the new contrasting black and white focus ring is a great step forward. However there are developers (including me) that don't want the focus ring to be present when using the mouse.

Solutions

  1. focus-visible polyfill
/*
  This will hide the focus indicator if the element receives focus via the mouse,
  but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

if you're using a framework that overrides classes, use the focus visible attributes.

[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
  outline: none;
}
  1. :focus-visible css pseudo selector. Chrome and Firefox now support this property. Currently Safari has no support. MDN Browser Compatibility
/*
  This will hide the focus indicator if the element receives focus via the mouse,
  but it will still show up on keyboard focus.
*/

button:focus:not(:focus-visible) {
 outline: none;
}

Keep in mind that for mobile users, if there's an element that triggers the soft keyboard to pop up, such as <input type="text">, it should have visual indication that it is focused.

user_82344570

There are 2 way to handle it.

  1. configuration in chrome which few has suggested.

  2. Programmatically approach outline: 0px transparent !important; in style Or outline: none !important; Both have worked for me.

Since we can't force user to do configuration, I would suggest for second Option but it is long process If you have any shorter way tell us.

user_30173900

This solved it for me:

chrome://flags/#form-controls-refresh

And disable this: screenshot

user_118902170

settings in chrome > Appearance > Show a quick highlight on the focused object. Disable this option.

user_162154900

Go to chrome desktop browser

settings->Advanced->Accessibility->(Turn off)Show a quick highlight on the focused object

to avoid the shadow boxes when u click on your browser

user_176537530
Related