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

try this code for all element which have blue border problem

*{
outline: none;
}

or

*{
outline-style: none;
}

Answer 2

Simply write outline:none;. No need to use pseudo element focus

Answer 3

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.

Answer 4

In my instance of this problem I had to specify box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

Answer 5

The fix for Chrome and other browsers

button:focus { outline: none !important; box-shadow: none !important; }

Answer 6

I had the same problem with bootstrap. I solved with both outline and box-shadow

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}