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

Add this in your CSS file.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

Answer 2

For anyone using Bootstrap and having this problem, they use :active:focus as well as just :active and :focus so you'll need:

element:active:focus {
    outline: 0;
}

Hopefully saved someone some time figuring that one out, banged my head for bit wondering why such a simple thing wasn't working.

Answer 3

I just remove the outline from all the tags in the page by selecting all and applying outline:none to everything:)

*:focus {outline:none}

As bagofcole mentioned, you might need to add !important as well, so the style will look like this:

*:focus {outline:none !important}

Answer 4

If you want to delete same effect in input, you could add the following code as well as button.

input:focus {outline:0;}

Answer 5

Use either this:

:active {
    outline:none;
}

or this if that doesn't work:

:active {
   outline:none !important;
}

This works for me (FF and Chrome, at least). Instead of targeting the :focus state, just target the :active state and that will remove the aesthetically obtrusive highlighting in your browser when a user clicks a link. But it will still retain the focus states when a user with disabilities tabs or shift-tabs through a page. Both parties are happy. :)

Answer 6

for this problem:

use this:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

result: