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

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

.btn:focus {
  outline: none;
}

如何删除那丑陋的东西？

1> Janak..：

---

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

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

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

---

如果您正在使用Bootstrap 4,请在此答案中添加`box-shadow:none`(并且不要忘记前缀`-webkit-box-shadow:none`).另请注意,Bootstrap 4在其btn类中已经有`.btn:focus {outline:none}`.

---

这对我使用bootstrap 3.感谢@janak

---

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

2> Chang..：

---

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

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

---

这对Bootstrap 4很有用.谢谢!

3> Rinat..：

---

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

Example button

---

这是最好的答案

---

阴影和轮廓非常相似，因此许多人打开了这个问题，意思是去除阴影（我也是这样做的）。无论如何，这不是很重要，因为目标是帮助人们。这个答案对某人有帮助吗？我想是的。

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;.通过outline在我的自定义CSS中稍后覆盖属性来解决,如下所示:

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

6> Eddy..：

---

这将解决带有文本的按钮,按钮只有一个图标或一个按钮是一个链接:

 
 Save

 
 

 
 Save



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);:焦点,我解决了我的问题

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