如果单击，如何删除按钮中的蓝色框阴影边框

Posted 2023-03-06

【中文标题】如果单击，如何删除按钮中的蓝色框阴影边框

【英文标题】：How to remove the blue box shadow border in button if clicked

【发布时间】：2014-08-05 01:04:38

【问题描述】：

如果按钮被点击，我想做的是在我的班级btnd 中删除按钮蓝色框阴影效果。

当前output：

我试过了，但是没用。

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

【问题讨论】：

只需将outline: 0; 添加为.btnd:focus，如此处所述。 ***.com/questions/20340138/…

【参考方案1】：

蓝色阴影是浏览器默认的：焦点状态

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

【讨论】：

虽然这个答案在技术上是正确的，但令我惊讶的是，没有人提到出于可访问性原因不建议删除轮廓。请参阅outlinenone.com 或a11yproject.com/posts/never-remove-css-outlines。

【参考方案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。

【讨论】：

.btnd:focus:active 可防止在单击时出现一瞬间的轮廓。 +1，干得好

【参考方案3】：

只需使用这条线来移除焦点 $( "#OK" ).button().blur();