Bootstrap按钮 - 在Chrome OS X上去掉轮廓

Question

Bootstrap按钮 - 在Chrome OS X上去掉轮廓

google-chromebuttonfocustwitter-bootstrap-3outline

74

我希望实现这个效果： http://getbootstrap.com/javascript/#popovers-examples - 滚动到“live Demo”并点击红色的popover按钮，在Mac OS X上的Chrome中...它非常完美漂亮。然而，在我自己的代码中，它是蓝色的轮廓线，尽管我试了很多CSS方法来去除它！在Safari和Firefox中看起来正确，但在Chrome中不行！

- Shane Holloman

1

它没有出现任何蓝色轮廓。 - The Hungry Dictator

20个回答

41

For any googlers like me, where..

.btn:focus {
    outline: none;
}

如果在 Google Chrome 中仍然无法正常工作，则以下操作应完全消除任何按钮发光。

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

- shaneparsons

3

我只需要 .btn:focus, .btn:active, .btn:active:focus。虽然你的回答指引了我正确的方向，所以谢谢！ - Tom Manterfield

11

您可能还希望添加 box-shadow: none;。 - Izhaki

1

为了给正在搜索的人更多的上下文信息，使用.btn:active:focus可以解决在Chrome中点击按钮时短暂闪烁蓝色轮廓的问题。显然，至少在Chrome中，当你点击按钮时，:focus和 :active状态都会短暂激活，因此需要额外的选择器来解决这个问题。 - NerdCowboy

38

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

这应该会移除轮廓和框阴影

- sidhartha madipalli

2

是 box-shadow 导致的。谢谢！ - Kajuna

19

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

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

- George Henrique

7

使用 SCSS：

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

- Hannes Be

6

.btn.active或.btn.focus单独不能覆盖Bootstrap的样式。对于默认主题：

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

- Narch Tranch

4

最简单的解决方案是：创建一个CSS文件并键入以下内容：

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

- Decode

4

您可以在不进行额外CSS的情况下去除阴影。

通常添加一个像这样的按钮。
<button class="btn btn-primary">按钮</button>

您可以简单地添加 shadow-none 来去除轮廓线。
<button class="btn btn-primary shadow-none">按钮</button>

- Jerakin

2

这将会把它移除 - 简洁明了：

.btn {
    outline: none !important;
}

- Alexander Belokon

2

以下是解决方案：

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

这个方法百分之百可行，希望对你有所帮助。

- nixx

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Heer · Accepted Answer

我看到.btn:focus被描绘了一个outline：

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

尝试将此更改为：

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

基本上，寻找任何在:focus状态下的元素中出现的outline属性 - 这就是导致此问题的原因。

更新 - 适用于Bootstrap v4：

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