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;
}

Just add `outline: 0;` for `.btnd:focus` as explained here. http://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome#answer-21758143 — Jehanzeb.Malik, Jun 14 '14 at 18:17

Matej Janovčík · Accepted Answer · 2019-05-07T00:37:11.493

40

Blue shadow is browser default :focus state

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

edited May 07 '19 at 00:37

answered Jun 14 '14 at 18:11

Matej Janovčík

1,242
12
13

2

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 http://www.outlinenone.com/ or https://a11yproject.com/posts/never-remove-css-outlines/. – marcvangend Mar 05 '18 at 08:46

ndcweb · Answer 2 · 2019-02-26T09:47:19.290

29

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.

edited Feb 26 '19 at 09:47

answered Jun 14 '14 at 18:19

ndcweb

725
4
10

6

The .btnd:focus:active prevents the outline that appears for a split second when clicked. +1, well done – meteorBuzz May 20 '15 at 15:26

score 0 · Answer 3 · answered Apr 12 '17 at 19:00

0

just use this line to remove the focus $( "#OK" ).button().blur();

answered Apr 12 '17 at 19:00

Juergen Schulze

1,515
21
29

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

3 Answers3

Linked