Remove blue border from css custom-styled button in Chrome

Question

I\'m working on a web page, and I want custom-styled tags. So with CSS, I said: border: none. Now it works perfectly in safari, but

Answer 1

Removing outline is terrible for accessibility! Ideally, the focus ring shows up only when the user intends to use the keyboard.

Use :focus-visible. It's currently a W3C proposal for styling keyboard-only focus using CSS, and is supported in Firefox (caniuse). Until other major browsers support it, you can use this robust polyfill.

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

I also wrote a more detailed post just in case you need more info.