单击时,bootstrap按钮显示蓝色轮廓

Question

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

.btn:focus {
  outline: none;
}

如何删除那丑陋的东西？

Answer 1

可能是你的房产被覆盖了.尝试附加 !important到您的代码以及:active.

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

同时添加box-shadow,否则你仍会看到按钮周围的阴影.

Answer 2

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

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

Answer 3

有内置的boostrap类shadow-none用于禁用box-shadow(不outline)(https://getbootstrap.com/docs/4.1/utilities/shadows/).这会删除按钮的阴影:

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

Answer 4

尝试以下代码

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

Answer 5

这在我的Chrome中发生(虽然不是在Firefox中).我发现这个outline属性是由Bootstrap设置的outline: 5px auto -webkit-focus-ring-color;.通过outline在我的自定义CSS中稍后覆盖属性来解决,如下所示:

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

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

单击时按钮的尺寸将变小.

Answer 7

试试这个

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

Answer 8

在Bootstrap 4中,他们使用 box-shadow: 0 0 0 0px rgba(0,123,255,0);:焦点,我解决了我的问题

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

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

Answer 10

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

• 右键单击按钮，然后使用（Firefox 中使用 firebug 检查元素）、（chrome 中检查元素）找到它的确切类嵌套。

• 为整个班级增添风格。只有这样才有效