How to remove the blue box shadow border in button if clicked

Question

I want to do is remove the button blue box shadow effect in my class btnd if the button is click.

current output:

i tried this but it doesnt work.

.btnd:active,
.btnd.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

Solution 1

Blue shadow is browser default :focus state

.btnd:active,
.btnd:focus,
.btnd:focus:active {
  background-image: none;
  outline: 0;
  box-shadow: none;
}

Solution 2

I deal with this problem just yesterday. You need:

.btnd:focus, .btnd:active, .btnd.active, .btnd:focus:active {
  background-image: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

The key is in last selector .btnd:focus:active.

Comments

[Jehanzeb.Malik]

Just add outline: 0; for .btnd:focus as explained here. stackoverflow.com/questions/20340138/…

[meteorBuzz]

The .btnd:focus:active prevents the outline that appears for a split second when clicked. +1, well done

[marcvangend]

Although this answer is technically correct, I am surprised that no one has mentioned that removing the outline is not recommended for accessibility reasons. See outlinenone.com or a11yproject.com/posts/never-remove-css-outlines.