Question

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

.btn:focus {
  outline: none;
}

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

Answer 1

可能是你的财产被覆盖了。尝试将 !important与：active。

一起附加到您的代码中

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

同时添加box-shadow，否则你仍会看到按钮周围的阴影。

Answer 2

在最新版本的Bootstrap中，我发现删除大纲本身并不起作用。我必须添加这个，因为还有一个盒子阴影：

 final JFXPanel fxPanel = new JFXPanel();

Answer 3

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

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

Answer 4

Chrome中发生了这种情况（虽然不是在Firefox中）。我发现Bootstrap将outline属性设置为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;
}

Answer 5

尝试以下代码

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

Answer 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;
}

然后单击按钮时尺寸会变小。

Answer 7

尝试

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

Answer 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);
}

Answer 9

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

(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>

Answer 10

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

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

Answer 11

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

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

希望它会有所帮助！

Answer 12

即使通过将其轮廓线的值设置为0从按钮上删除轮廓，单击按钮时按钮上仍然有一个有趣的行为，其尺寸会缩小一点。所以我想出了一个最佳解决方案：

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

希望这对您有帮助...

Answer 13

这是我的Boostrap 4解决方案，用于移除按钮轮廓

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

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

Answer 14

按钮点击后，我发现这对我的情况非常有用。

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

Answer 15

/DEBUGTYPE:PDATA

这适用于BS3

Answer 16

您需要使用正确的嵌套，然后将样式应用于它。

右键单击按钮，使用（使用firebug for firefox检查元素）找到确切的类嵌套，（检查chrome的元素）。
为整个班级添加风格。只有这样它才能起作用

Answer 17

这个在Bootstrap 4中为我工作：

.btn {border-color: transparent;}

Answer 18

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

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

bootstraps var带有标志'！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的优先级高于第二个var。其余状态和情况也一样。希望对您有帮助。

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

Chears

Answer 19

所有元素的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;
    }
  }
}

Answer 20

尝试

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

Answer 21

代替定位按钮类（ .btn ），在这里我定位到 button 元素本身，并且对我有用。

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

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

Answer 22

尝试以下

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

Answer 23

请注意，如果您的按钮位于以下锚点内：

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

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

Answer 24

我正在使用bootstrap 4，你可以使用大纲和盒子阴影。

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

或者如果按钮位于没有背景的div之类的元素内，则框阴影就足够了。

#buttonId {
     box-shadow: none;
}

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

Answer 25

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

Answer 26

改变这些价值观对我有用。我是通过查看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*/;
}

这也保留了按钮的阴影，只更改了单击按钮的颜色。

Answer 27

覆盖确切的引导程序语句：

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

Answer 28

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

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

Answer 29

这是一种非CSS方法。使用JQuery，只需删除＆＃34;焦点＆＃34;单击元素时的类。

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

此方法可能会导致边框闪烁，然后暂时退出，在我看来这看起来并不坏（当点击按钮时，它看起来像响应的一部分）。

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

Answer 30

将“边框颜色”更改回灰色

<div class="modal fade" id="modal-edit">
  <div class="modal-dialog">
    <div class="modal-content">
        <form action="page.php" method="POST" class="form-horizontal">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Edit</h4>
        </div>
        <div class="modal-body">
        <div class="box-body">
            <div class="form-group">
            <label class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10"> 
                <input name="item0" id="item0" class="form-control">
                </div>
            </div>

            <div class="form-group">
            <label class="col-sm-2 control-label">Gender</label>
            <div class="col-sm-10">
            <select class="form-control select2" name="item1" id="item1" >
                <option></option>
                <option>Female</option>
                <option>Male</option>
            </select>
            </div>
            </div>

            <div class="form-group">
            <label class="col-sm-2 control-label">Age</label>
                <div class="col-sm-10"> 
                <input name="item2" id="item2" class="form-control">
                </div>
            </div>
        </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
          <button type="Submit" name="update" class="btn btn-primary">Edit</button>
        </div>
        </form>

    </div>
  </div>
</div>

Answer 31

您可以将下面的答案添加到_variable.scss文件中，而无需更改其他轮廓或其他任何内容。我敢肯定这会起作用。

$btn-active-box-shadow: none !important;

Answer 32

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

Answer 33

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

.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。希望这会有所帮助。

Answer 34

对于复选框和单选按钮

.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;
}

Answer 35

非常简单：

.btn {outline: none;}

单击时，bootstrap按钮显示蓝色轮廓

35 个答案: