我的按钮都有一个高亮后,我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?
我的按钮都有一个高亮后,我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?
当前回答
.btn:focus,.btn:active, a{
outline: none !important;
box-shadow: none;
}
这个大纲:没有将工作的按钮和标签
其他回答
这是工作,希望能帮到你
.btn:focus, .btn:focus:active {
outline: none;
}
这对我很管用。 我创建了一个自定义类,覆盖必要的CSS。
.custom-button:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
-webkit-box-shadow适用于Chrome和safari浏览器。
我在另一个页面上找到了这个问题和回答,覆盖按钮焦点样式对我有用。这个问题可能是Chrome的MacOS特有的。
.btn:focus {
outline: none;
box-shadow: none;
}
请注意,这对可访问性有影响,除非你的按钮和输入有一个良好的一致的焦点状态,否则不建议这样做。根据下面的评论,有些用户不能使用鼠标。
对于sass用户,引导4应该通过重写变量来操作。
如果你想禁用按钮周围焦点上的框影:
$btn-focus-box-shadow: none;
你也可以禁用输入周围焦点上的框影:
$input-focus-box-shadow: none;
或者两者都有一个变量:
$input-btn-focus-box-shadow: none;
试试其中一个吧:
大纲:0; 或 大纲:0 px; 或 大纲:没有;
而且 (美元).trigger(“模糊”);