Question

我希望实现这个目标： http://getbootstrap.com/javascript/#popovers-examples - 滚动到“现场演示”并按下OS X上的Chrome中的红色弹出按钮....它非常漂亮

现在去（问题孩子）：http://yoyo.io/javascript/#popovers - 它概述了蓝色，aaaargh。

如果你检查，你会看到一连串的CSS努力将我删除！它在Safari和Firefox中看起来是正确的，但在Chrome中没有用！

任何人 - 我在俯视什么？

非常感谢提前！

Answer 1

我看到.btn:focus上有outline：

.btn:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

尝试将其更改为：

.btn:focus {
  outline: none;
}

基本上，在outline ed元素上查找:focus的任何实例 - 这就是造成它的原因。

Answer 2

对于像我这样的任何google，其中..

.btn:focus {
    outline: none;
}

仍然无法在Google Chrome中运行，以下内容应完全删除任何按钮亮起。

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

Answer 3

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

这应该删除轮廓和方框阴影

Answer 4

在bootstrap 4中，不再使用轮廓，而是使用框阴影。如果是您的情况，请执行以下操作：

The initial intent of migrate4j was to make a Java version of Ruby's db:migrate.

Answer 5

仅

.btn.active或.btn.focus无法覆盖 Bootstrap的样式。对于默认主题：

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

Answer 6

使用scss：

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

Answer 7

搜索并替换

outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;

替换为

outline: 0;

Answer 8

这将删除它 - 简短而干净：

.btn {
    outline: none !important;
}

Answer 9

最简单的解决方案是：创建一个CSS文件并输入：

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

Answer 10

以下是解决方法：

#sec-one{padding: 15px 0;}
p{text-align: center;}
/*
* Change the color to any color you want;
* or set to none if you don't any outline at all.
*/
*:focus:not(a){
    outline: 2px solid #f90d0e !important;
    box-shadow: none !important;
}

<!doctype html>
<html lang="en">
<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<section id="sec-one">
<div class="container">
    <div class="row">
      <div class="col">
        <form>
          <fieldset class="form-group">
            <input type="text" class="form-control" placeholder="Full Name" required>
          </fieldset>
           <fieldset class="form-group">
            <input type="email" class="form-control" placeholder="Email Address" required>
          </fieldset>
          <fieldset class="form-group">
            <input type="submit" class="btn btn-default" value="Sign Up">
          </fieldset>
          </form>
      </div>
    </div>
</div>
</section>
</body>
</html>

这可以100％希望对您有帮助。

Answer 11

你可以把这个标签放到你的HTML中。

<button class='btn btn-primary' onfocus='this.blur'>
     Button Text
</button>

我使用了焦点，因为onclick仍然显示了一微秒的光晕，并且在使用它方面做了一个可怕的闪光。在所有css方法失败后，这似乎摆脱了。

Answer 12

CSS来自此文件＆＃34; tab-focus.less＆＃34;在mixins文件夹中（可能很难找到，因为mixin没有在chrome dev-tools中显示）。所以你应该编辑它：

// WebKit-style focus 

.tab-focus() {
      // Default
      outline: thin dotted;
      // WebKit
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }

Answer 13

在Bootstrap源Sass文件的mixins中，删除所有$border引用（不在大纲变体中）。

@mixin button-variant($color, $background, $border){ 
$active-background: darken($background, 10%);
//$active-border: darken($border, 12%);    
  color: $color;
  background-color: $background;
  //border-color: $border;
  @include box-shadow($btn-box-shadow);
  [...]
}

或者只是编码你自己的_customButton.scss mixin。

Answer 14

如果以上答案仍然无效，请添加以下内容：

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

Answer 15

如果有人正在使用bootstrap sass，请注意代码位于_reboot.scss文件中，如下所示：

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

因此，如果您想保留_reboot文件，我想可以用普通的CSS覆盖它，而不是尝试查找要更改的变量。

Answer 16

在这样的压力下，它对我的自举按钮有效

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

Bootstrap按钮 - 删除Chrome OS X上的大纲

16 个答案: