单击“引导”按钮时显示蓝色轮廓

我添加了这一点，但仍然蓝色的轮廓出现时，按钮被点击。

.btn:focus {
outline: none;
}

怎么除掉那个丑东西？

234237 次浏览
小开

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

  • 右键单击按钮，找到确切的类嵌套使用(检查元素使用 firebug 的 firefox) ，(检查元素的 chrome)。

  • 给所有的类添加风格，只有这样才会起作用

小开

尝试以下代码

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

也许你的财产正在被覆盖。 尝试将 !important与: active 一起附加到代码中。

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

也添加框阴影，因为否则你仍然会看到周围的阴影按钮。

虽然这不是一个很好的练习使用！重要的是，我建议您使用更具体的类，然后尝试应用的 css 与使用！重要的。

小开

请记住，如果你的按钮是在一个锚的内部像:

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

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

小开

这种情况在 Chrome 浏览器中也发生过(尽管不是在 Firefox 浏览器中)。我发现引导程序将 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;
}
小开

这将解决按钮与文本，按钮只有一个图标或按钮是一个链接:

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

然后按钮将变得更小的大小时，单击。

小开

点击按钮后，我发现这在我的案例中非常有用。

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

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

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

试试下面的

.bootstrap-select .dropdown-toggle:focus
{
outline: 0 !important;
}
小开 
a:focus {
outline: none;
}

这个在 BS3上对我有用

小开

如果某人仍然有这个问题没有解决，这可能会有所帮助。

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

小开

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

小开

在最新版本的 Bootstrap 中，我发现删除轮廓本身不起作用。我必须加上这个，因为还有一个盒子阴影:

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

我只是遇到了同样的问题，下面的代码对我很有用:

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

希望能有所帮助！

小开

我使用的是引导程序4，你可以使用轮廓和盒子阴影。

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

或者如果按钮位于一个元素内部，比如一个没有背景的 div，那么方框阴影就足够了。

#buttonId {
box-shadow: none;
}

例子: https://codepen.io/techednelson/pen/XRwgRB

小开

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

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


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

下面是一个非 CSS 方法。使用 JQuery，只要在单击元素时删除“ focus”类。

$(“ . btn”) . mousemove (function (element){ $(this) . RemoveClass (“ focus”) ; }) ;

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

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

小开

在引导程序4中，他们使用 集中注意力，所以我解决了我的问题

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);
}
小开

有内置的自举类 shadow-none禁用 box-shadow(而不是 outline)(https://getbootstrap.com/docs/4.1/utilities/shadows/)。这消除按钮阴影:

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

更新 : docs link for bootstrap 5: https://getbootstrap.com/docs/5.1/utilities/shadows/，and for beta: < a href = “ https://getbootstrap.com/docs/5.2/tools/shadow/”rel = “ noReferrer”> https://getbootstrap.com/docs/5.2/utilities/shadows/

小开

这个在引导程序4中对我很有用:

.btn {border-color: transparent;}

小开

试试这个

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

实际上在 bootstrap 中定义了所有情况下的所有变量。在您的示例中，只需覆盖来自“ _ variable.scss”文件的默认变量“ $input-btn-focus-box-shadow”。像这样: $input-btn-focus-box-shadow: none; 注意，需要在自己的定制“ _ yourCusomVarsFile.scss”中重写该变量。并且这个文件应该在项目中以第一顺序导入，然后像这样引导:

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

Bootstraps 变量与标志“ ! 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 高，其他状态和情况也是如此。 希望对你有帮助。

下面是来自 repo 的’_ variable.scss’文件，您可以在其中找到来自 bootstrap 的所有首字母值: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

谢尔斯

小开

很简单:

.btn {outline: none;}
小开

改变这些值对我来说很有用，我是通过浏览器的开发者工具找到的

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

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

小开

重写确切的 bootstrap 语句:

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

如果使用的是4.3或更高版本，则代码将无法正常工作。 这是我用过的，对我很管用。

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

取而代之的是针对按钮类(。 btn) ，这里我的目标是 纽扣元素本身，它适合我。

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

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

小开

试试看

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

将边框颜色改回灰色

.btn:focus,
.btn:active{
border: 1px solid #ced4da !important;
}
小开

即使通过设置它的值为0从按钮中移除了轮廓，当点击按钮时，它仍然有一个有趣的行为，它的尺寸缩小了一点。所以我想出了一个最佳解决方案:

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

希望这个能帮上忙。

小开

所有元素(不仅仅是按钮)的 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;
}
}
}
小开

您可以将下面的答案添加到您的 _ variable.scss 文件，不需要更改其他大纲或任何东西。我相信这会有用的。

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

如何避免边框聚焦于单击自举按钮:

.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 中覆盖的代码。希望这对你有帮助。

小开

用于复选框和单选按钮

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

.btn:focus{
box-shadow:none !important;
}
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">






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


提交答案