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

Posted 2023-05-09

技术标签:

【中文标题】引导按钮单击时显示蓝色轮廓【英文标题】：bootstrap button shows blue outline when clicked 【发布时间】：2014-06-13 12:51:26 【问题描述】：

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

.btn:focus 
  outline: none;

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

【问题讨论】：

尝试为按钮设置:active。附加：使用浏览器中的 Inspector 来查找问题。您能否发布更多代码或 jsfiddle 演示，以便我们为您提供帮助不确定按钮，但引导程序将 box-shadow 添加到输入字段中，可以使用 box-shadow:none 删除； FWIW，焦点样式对于键盘导航很重要。这里有一张图片会很有用 【参考方案1】：

可能是您的属性被覆盖。尝试将 !important 与 :active 一起附加到您的代码中。

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

还要添加 box-shadow，否则您仍然会看到按钮周围的阴影。

虽然这不是使用 !important 的好习惯，但我建议您使用更具体的类，然后尝试使用 !important 应用 css...

【讨论】：

@Janak 但是为什么在覆盖 :active 时有必要？我还可以补充一点，当使用 !important 进行 nuking 时，不需要伪类如果您使用的是 Bootstrap 4，请在此答案中添加 box-shadow: none（并且不要忘记前缀 -webkit-box-shadow: none）。另请注意，Bootstrap 4 在其 btn 类中已经有 .btn:focus outline: none 。不使用鼠标导航时，视觉提示至关重要。如果您删除大纲，您必须添加一些其他视觉反馈，否则您将瘫痪您的网站。【参考方案2】：

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

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

更新：引导程序 5 的文档链接：https://getbootstrap.com/docs/5.1/utilities/shadows/

【讨论】：

非常感谢。这是最好的答案这是您正在寻找的解决方案。这就是解决方案，继续前进，继续前进。感谢这通过 Bootstrap 4 为 Firefox 解决了这个问题。这篇文章是关于删除轮廓，而不是阴影。很遗憾，这条评论具有误导性。不起作用。其他答案中的 CSS 解决方案有效。【参考方案3】：

在最新版本的 Bootstrap 中，我发现删除轮廓本身不起作用。我必须添加这个，因为还有一个 box-shadow：

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

【讨论】：

这对我有帮助。如果你想确保按下所有按钮，只需使用 button outline: none !important;盒子阴影：无！重要； 【参考方案4】：

试试下面的代码

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

【讨论】：

我只需要这部分来删除 chrome 中的轮廓：button:focus outline:none;【参考方案5】：

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

【讨论】：

【参考方案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;

然后按钮在点击时会变小。

【讨论】：

【参考方案7】：

试试这个

.btn

    box-shadow: none;
    outline: none;

【讨论】：

【参考方案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);

【讨论】：

【参考方案9】：

所有元素（不仅是按钮）的 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;

【讨论】：

【参考方案10】：

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

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

【讨论】：

【参考方案11】：

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

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

希望对您有所帮助！

【讨论】：

大纲！啊！！砰【参考方案12】：

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

右键单击按钮并使用（Inspect element using firebug for firefox）找到它的确切嵌套类，（inspect element for chrome）。

为整个类添加样式。只有这样它才会起作用

【讨论】：

【参考方案13】：

点击按钮后，我发现这对我来说非常有用。

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

【讨论】：

【参考方案14】：

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

button.btn:focus 
  border-width: 0;

【讨论】：

【参考方案15】：

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

【讨论】：

【参考方案16】：

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

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

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

【讨论】：

【参考方案17】：

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

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

引导变量带有标志 '!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 的优先级高于第二个。其余状态和情况也是如此。希望对你有帮助。

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

切丝

【讨论】：

【参考方案18】：

即使通过将按钮的值设置为 0 来移除按钮的轮廓后，单击按钮时仍然有一个有趣的行为，它的大小缩小了一点。所以我想出了一个最佳解决方案：

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

希望这会有所帮助...

【讨论】：

【参考方案19】：

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

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

【讨论】：

【参考方案20】：

a:focus 
  outline: none;

这在 BS3 上适用于我

【讨论】：

【参考方案21】：

这个在 Bootstrap 4 中为我工作：

.btn border-color: transparent;

【讨论】：

【参考方案22】：

试试

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

【讨论】：

【参考方案23】：

请记住，如果您的按钮位于锚点内，例如：

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

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

【讨论】：

【参考方案24】：

试试下面的

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

【讨论】：

【参考方案25】：

我用的是bootstrap 4，你可以使用outline和box-shadow。

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

或者，如果按钮位于没有背景的 div 等元素内部，则 box-shadow 就足够了。

#buttonId 
     box-shadow: none;

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

【讨论】：

【参考方案26】：

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

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

【讨论】：

你是对的。没有 -webkit-box-shadow: none !important;行。【参考方案27】：

而不是定位到按钮类 (.btn)，这里我定位到 button 元素本身，它适用于我。

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

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

【讨论】：

【参考方案28】：

用于复选框和单选按钮

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

【讨论】：

【参考方案29】：

这是一个非 CSS 方法。使用 JQuery，只要单击元素，只需删除“焦点”类即可。

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

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

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

【讨论】：

嗯。添加更多的 javascript 来击败 CSS 并不是最好的做法。恕我直言。【参考方案30】：

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

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

【讨论】：

以上是关于引导按钮单击时显示蓝色轮廓的主要内容，如果未能解决你的问题，请参考以下文章

如果为空选择选项，则单击按钮时显示模式引导

如何通过 Javascript / jQuery 在按钮单击时显示引导警报？

css 删除按钮上的蓝色“选定”轮廓

移除 HTML 元素的蓝色轮廓

单击时按钮周围出现不需要的轮廓或边框

引导工具提示在点击时显示，但在鼠标移出时隐藏