引导按钮-删除轮廓在 Chrome OS X 上

小开

最佳答案

我看到 .btn:focus上面有 outline:

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

试着把它改成:

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

基本上，在 :focused 元素上寻找 outline的任何实例ーー这就是导致它的原因。

更新 -适用于 Bootstrap v4:

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

小开

搜索和替换

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

替换到

outline: 0;

小开

对于任何像我这样的谷歌人来说。

.btn:focus {
outline: none;
}

仍然不能在谷歌浏览器工作，以下应该完全删除任何按钮发光。

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

小开

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

这应该删除轮廓和框阴影

小开

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

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

我之所以使用聚焦，是因为 onclick 仍然会显示一微秒的闪光，并且在使用时会产生一个可怕的闪光效果。在所有 css 方法都失败之后，这似乎就消失了。

小开

CSS 从这个文件“ tab-focus”开始。“ less”(可能很难找到，因为在 chrome dev-tools 中没有显示混合文件)。所以你应该编辑这个:

// WebKit-style focus


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

小开

这将删除它——简短而干净:

.btn {
outline: none !important;
}

小开

.btn.active或 .btn.focus不能单独使用重写 Bootstrap 的样式。默认主题:

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

小开

在 Bootstrap 源 Sass 文件的 Mixin 中，删除所有 $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 代码。

小开

在引导程序4中，不再使用轮廓，而是使用盒子阴影。如果是你的情况，只需要做以下事情:

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

小开

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

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

小开

带有 SCSS:

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

小开

如果上述答案仍然不起作用，请添加以下内容:

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

小开

如果有人使用 bootstrap sass 注释，代码在 _ reboot.scss 文件中，如下所示:

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

所以如果你想保留 _ reboot 文件，我想你可以用普通的 css 来覆盖，而不是试图寻找一个变量来修改。

小开

解决办法是:

#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% 希望它能帮助你。

小开

在经历了这样的压力之后，它对我的启动按钮起了作用

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

小开

如果您正在使用引导程序 v5.1或任何其他版本。要删除引导栏导航栏切换按钮的轮廓，请这样做:

.navbar-toggler:focus {
box-shadow: none !important;
}

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">


<title>navbar</title>
</head>
<body>
  

<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Navbar toggler button</h5>
<span class="text-muted">Check the CSS to see how to remove the outline of the toggler button.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>


<!-- Optional JavaScript; choose one of the two! -->


<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>


<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
-->
</body>
</html>

希望这个答案能对你有所帮助。

小开

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
button.btn:focus,
button.btn:active,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
box-shadow: inset 0 -1px 0 #ddd;
outline: none !important;
}

小开

您可以删除的阴影没有做任何额外的 CSS 自己。

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

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

小开

5号引导器及以上

{—— bs-btn-focus-shadow-rgb: none; }