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

use*_*634 17 html javascript css jquery twitter-bootstrap-3

我想要做的是btnd如果单击按钮,则删除我班级中的按钮蓝框阴影效果.

电流输出:

我试过这个,但它不起作用.

.btnd:active,
.btnd.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
Run Code Online (Sandbox Code Playgroud)

Mat*_*čík 35

蓝色阴影是浏览器默认值:焦点状态

.btnd:active,
.btnd:focus,
.btnd:focus:active {
  background-image: none;
  outline: 0;
  box-shadow: none;
}
Run Code Online (Sandbox Code Playgroud)

  • 虽然这个答案在技术上是正确的,但我很惊讶没有人提到出于可访问性原因不建议删除大纲。请参阅 http://www.outlinenone.com/ 或 https://a11yproject.com/posts/never-remove-css-outlines/。 (2认同)

ndc*_*web 28

我昨天才处理这个问题.你需要:

.btnd:focus, .btnd:active, .btnd.active, .btnd:focus:active {
  background-image: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
Run Code Online (Sandbox Code Playgroud)

关键是在最后一个选择器.btnd:focus:active.

  • .btnd:focus:active会阻止单击时显示的瞬间轮廓.+1,干得好 (6认同)