如果单击按钮，如何去除蓝色框阴影边框

Question

我想做的是，如果按钮被点击了，就移除我的类btnd中的按钮蓝色边框阴影效果。

当前输出结果：

我尝试过这个方法，但它不起作用。

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

- user3729634

---

只需按照此处所述，在.btnd:focus中添加outline: 0;即可。https://dev59.com/vWIj5IYBdhLWcg3wWkCd - Jehanzeb.Malik

Answer 1

蓝色阴影是浏览器默认的:focus状态

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

- Matej Janovčík

---

虽然这个答案在技术上是正确的，但我很惊讶没有人提到为了可访问性原因不建议移除轮廓线。请参见http://www.outlinenone.com/或https://a11yproject.com/posts/never-remove-css-outlines/。 - marcvangend

Answer 2

我昨天刚处理过这个问题。你需要：

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

关键在于最后一个选择器：.btnd:focus:active。

- ndcweb

---

.btnd:focus:active可以防止在点击时出现短暂的轮廓线。+1，干得好。 - meteorBuzz

Answer 3

只需使用此行代码即可取消焦点 $( "#OK" ).button().blur();

- Juergen Schulze