如何删除点击按钮周围的焦点

我的按钮都有一个高亮后，我点击他们。这是Chrome。

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

我正在使用带有主题的Bootstrap，但我非常确定这不是它:我以前在另一个项目中注意到这一点。

如果我使用<a>标签而不是<button>，它就会消失。为什么?如果我想使用<button>，我怎么让它消失呢?

当前回答

如果以上方法对你不起作用，试试下面的方法:

.btn:焦点{轮廓:无;框影:无;边框:2px实体透明;}

正如user1933897所指出的，这可能是针对MacOS和Chrome的。

其他回答

我找到了一个解决方案，只需在css代码中添加以下行。

button:focus { outline: none }

如果您正在使用webkit浏览器(可能是与webkit供应商前缀兼容的浏览器)，则该轮廓属于按钮的-webkit-focus-ring伪类。简单地设置它的轮廓为none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome就是这样一个webkit浏览器，这种效果也会发生在Linux上(不仅仅是macOS的事情，尽管一些Chrome风格只适用于macOS)

如果button:focus {box-shadow: none}不适合你，可能会有一些库添加边界，就像我的例子中使用的伪选择器::after。

所以我用以下解决方案删除了显示在焦点上的边界:

button:focus::after {
    outline: none;
    box-shadow: none;
}

尝试这个解决方案删除按钮周围的边界。将此代码添加到css中。

Try

button:focus{
outline:0px;
}

如果不工作，然后使用下面。

button:focus{
 outline:none !important;
 }

这样效果最好

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

推荐文章