引导按钮单击时显示蓝色轮廓答案

【问题标题】：bootstrap button shows blue outline when clicked引导按钮单击时显示蓝色轮廓
【发布时间】：2014-06-13 12:51:26
【问题描述】：

我添加了这个，但单击按钮时仍然出现蓝色轮廓。

.btn:focus {
  outline: none;
}

如何去除那个丑陋的东西？

【问题讨论】：

尝试为按钮设置:active。附加：使用浏览器中的 Inspector 来查找问题。
您能否发布更多代码或 jsfiddle 演示，以便我们为您提供帮助
不确定按钮，但引导程序将 box-shadow 添加到输入字段中，可以使用 box-shadow:none 删除；
FWIW，焦点样式对于键盘导航很重要。
这里有一张图片会很有用

标签： css twitter-bootstrap

【解决方案1】：

可能是您的属性被覆盖。尝试将 !important 与 :active 一起附加到您的代码中。

.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}

还要添加 box-shadow，否则您仍然会看到按钮周围的阴影。

虽然这不是使用 !important 的好习惯，但我建议您使用更具体的类，然后尝试使用 !important 应用 css...

【讨论】：

@Janak 但是为什么在覆盖 :active 时有必要？
我还可以补充一点，当使用 !important 进行 nuking 时，不需要伪类
如果您使用的是 Bootstrap 4，请在此答案中添加 box-shadow: none（并且不要忘记前缀 -webkit-box-shadow: none）。另请注意，Bootstrap 4 在其 btn 类中已经有 .btn:focus { outline: none }。
不使用鼠标导航时，视觉提示至关重要。如果您删除大纲，您必须添加一些其他视觉反馈，否则您将瘫痪您的网站。

【解决方案2】：

有内置的 boostrap 类shadow-none 用于禁用box-shadow（不是outline）（https://getbootstrap.com/docs/4.1/utilities/shadows/）。这会移除按钮的阴影：

<button class='btn btn-primary shadow-none'>Example button</button>

更新：引导程序 5 的文档链接：https://getbootstrap.com/docs/5.1/utilities/shadows/

【讨论】：

非常感谢。
这是最好的答案
这是您正在寻找的解决方案。这就是解决方案，继续前进，继续前进。感谢这通过 Bootstrap 4 为 Firefox 解决了这个问题。
这篇文章是关于删除轮廓，而不是阴影。很遗憾，这条评论具有误导性。
不起作用。其他答案中的 CSS 解决方案有效。

【解决方案3】：

在最新版本的 Bootstrap 中，我发现删除轮廓本身不起作用。我必须添加这个，因为还有一个 box-shadow：

.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
}

【讨论】：

这对我有帮助。
如果你想确保按下所有按钮，只需使用 button { outline: none !important;盒子阴影：无！重要； }

【解决方案4】：

试试下面的代码

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

【讨论】：

我只需要这部分来删除 chrome 中的轮廓：button:focus {outline:none;}

【解决方案5】：

这发生在我的 Chrome 中（虽然不是在 Firefox 中）。我发现 outline 属性被 Bootstrap 设置为 outline: 5px auto -webkit-focus-ring-color;。通过稍后在我的自定义 CSS 中覆盖 outline 属性来解决，如下所示：

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: 0;
}

【讨论】：

【解决方案6】：

这将解决带有文本的按钮，按钮只有图标或按钮是链接：

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{   
    outline:none !important;
}

如果你添加border:none !important;

{
    border:none !important;
    outline:none !important;
}

然后按钮在点击时会变小。

【讨论】：

【解决方案7】：

试试这个

.btn
{
    box-shadow: none;
    outline: none;
}

【讨论】：

【解决方案8】：

在 Bootstrap 4 中，他们使用 box-shadow: 0 0 0 0px rgba(0,123,255,0); on :focus，所以我解决了我的问题

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

【讨论】：

【解决方案9】：

所有元素（不仅是按钮）的 SCSS 方式：

body {
  * {
    &:focus, &.focus,
    &:active, &.active {
      outline: transparent none 0 !important;
      box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
    }
  }
}

【讨论】：

【解决方案10】：

如果有人仍有此问题未解决，这可能会有所帮助。

(function() {
  $('button').on('click', function() {
    $("#action").html("button was clicked");
    console.log("the button was clicked");
  });
})();

.btn-clear {
  background-color: transparent !important;
  border-style: none !important;
  cursor: pointer;
}

.btn-clear:active,
.btn-clear:focus {
  outline-style: none !important;
  outline-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>

<label id="action"></label>

【讨论】：

【解决方案11】：

我刚刚遇到了同样的问题，下面的代码对我有用：

.btn:active, .btn:focus, .btn:active:focus, .btn.active:focus {
    outline: none !important;
}

.btn {
  margin:32px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->




<button type="button" class="btn btn-default">Button</button>

希望对您有所帮助！

【讨论】：

大纲！啊！！砰

【解决方案12】：

您需要使用正确的嵌套，然后对其应用样式。

右键单击按钮并使用（Inspect element using firebug for firefox）找到它的确切嵌套类，（inspect element for chrome）。
为整个类添加样式。只有这样它才会起作用

【讨论】：

【解决方案13】：

点击按钮后，我发现这对我来说非常有用。

$('#buttonId').blur();

【讨论】：

【解决方案14】：

我选择简单地删除:focus 上的边框宽度。这消除了轮廓和按钮圆角之间的丑陋空间。由于某种原因，此问题仅发生在实际的按钮元素上，而不是 <a class="btn"> 元素上。

button.btn:focus {
  border-width: 0;
}

【讨论】：

【解决方案15】：

有时候{outline: 0}没有解决问题，我们可以试试{box-shadow: none;}

【讨论】：

【解决方案16】：

这是我删除按钮轮廓的 Boostrap 4 解决方案

/*
* Boostrap 4
* Remove blue outline from button
*/

.btn:focus,
.btn:active {
  box-shadow: none;
}

【讨论】：

【解决方案17】：

实际上在 bootstrap 中定义了所有情况下的所有变量。在您的情况下，您只需从“_variables.scss”文件中覆盖默认变量“$input-btn-focus-box-shadow”。像这样： $input-btn-focus-box-shadow: none; 请注意，您需要在您自己的自定义“_yourCusomVarsFile.scss”中覆盖该变量。并且该文件应该首先导入项目中，然后像这样引导：

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

引导变量带有标志 '!default'。

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

因此，在您的文件中，您将覆盖默认值。这里是插图：

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

第一个 var 的优先级高于第二个。其余状态和情况也是如此。希望对你有帮助。

这是来自 repo 的“_variable.scss”文件，您可以在其中找到引导程序中的所有初始值：https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

切丝

【讨论】：

【解决方案18】：

即使通过将按钮的值设置为 0 来移除按钮的轮廓后，单击按钮时仍然有一个有趣的行为，它的大小缩小了一点。所以我想出了一个最佳解决方案：

.btn:focus {
   outline: none !important;
   box-shadow: 0 0 0 0;
}

希望这会有所帮助...

【讨论】：

【解决方案19】：

如何避免点击引导按钮时出现边框焦点：

.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: none;
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none;
}

如何避免点击引导输入字段时出现边框焦点：

.form-control.focus, .form-control:focus {
    outline: 0;
    box-shadow: none;
}

如果这不适用于您的特定情况，那么我建议您打开检查器页面，单击选择器工具（左上角框中的小箭头）单击您要尝试的元素编辑，然后再次单击同一元素并查看“样式”选项卡以查看 CSS 方面的变化...搜索与“焦点”相关的内容，您应该能够检测到您必须在您的CSS。希望这会有所帮助。

【讨论】：

【解决方案20】：

a:focus {
  outline: none;
}

这在 BS3 上适用于我

【讨论】：

【解决方案21】：

这个在 Bootstrap 4 中为我工作：

.btn {border-color: transparent;}

【讨论】：

【解决方案22】：

试试

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

【讨论】：

【解决方案23】：

请记住，如果您的按钮位于锚点内，例如：

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

将样式添加到按钮本身可能还不够，您可能需要在适当的地方添加a:focus, a:active { outline: none } CSS 规则（这对我有用）。

【讨论】：

【解决方案24】：

试试下面的

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

【讨论】：

【解决方案25】：

我用的是bootstrap 4，你可以使用outline和box-shadow。

#buttonId {
    box-shadow: none;
    outline: none;
}

或者，如果按钮位于没有背景的 div 等元素内部，则 box-shadow 就足够了。

#buttonId {
     box-shadow: none;
}

示例：https://codepen.io/techednelson/pen/XRwgRB

【讨论】：

【解决方案26】：

如果您使用的是 4.3 或更高版本，您的代码将无法正常工作。这是我用的。它对我有用。

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

【讨论】：

你是对的。没有 -webkit-box-shadow: none !important;行。

【解决方案27】：

而不是定位到按钮类 (.btn)，这里我定位到 button 元素本身，它适用于我。

        button:focus {
          outline:none !important;
          box-shadow:none !important;
        }

并且可以使用shadow-none 类作为输入字段

【讨论】：

【解决方案28】：

用于复选框和单选按钮

.form-check-input:checked ,.form-check-input:focus,.form-check-input:active {
  outline: none !important;
  box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
}

【讨论】：

【解决方案29】：

这是一个非 CSS 方法。使用 JQuery，只要单击元素，只需删除“焦点”类即可。

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

这种方法可能会导致边框闪现存在然后短暂退出，在我看来这看起来不错（它看起来像是单击按钮时响应的一部分）。

我使用 .mousemove() 的原因是 .click() 和 .mouseup() 都被证明是无效的。

【讨论】：

嗯。添加更多的 javascript 来击败 CSS 并不是最好的做法。恕我直言。

【解决方案30】：

更改这些值对我有用。我是通过查看 Chrome 的开发者工具找到的

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: /*Change This*/;
    border-color: /*Change This*/;
}

这也保留了按钮的阴影，它只是改变了点击按钮的颜色。

【讨论】：