单击 Bootstrap 中的按钮后如何去除光晕？

Question

我正在 Bootstrap 中制作一个按钮，它看起来不错。但是，每当我单击按钮时，至少在 chrome 中，它会在按钮边缘周围显示蓝色光晕，直到我单击屏幕的其他部分。有没有办法消除这种蓝光？

我在这里看到了这个问题：但唯一的答案是将 .yourbox:focus { border: 0 !important; } 添加到样式表的注释。我这样做了，并将 class "yourbox" 添加到按钮，但它没有改变任何东西。这是我的按钮的当前代码：

<button type="button" class="btn btn-info btn-block">
Button
</button>

Answer 1

删除 focus 上的轮廓应该可以帮助您，已测试。

.btn:focus {
    outline: 0;
}

Answer 2

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

如果上述方法也不起作用，则使用以下方法从每个输入属性中删除轮廓：

textarea:focus, 
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus, 
input[type="time"]:focus, 
input[type="week"]:focus, 
input[type="number"]:focus, 
input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="color"]:focus, 
.uneditable-input:focus {   
    box-shadow: none !important;
    outline: 0 !important;
}

select:focus {
   outline-color: transparent !important;
}

Answer 3

焦点有3个参数：

.your_class:focus {
        border-color: #66AFE9;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
        outline: 0 none;
    }

禁用它们

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

Answer 4

要从 link 中移除光环，请使用下面的 css 代码。

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

单击 Bootstrap 中的按钮后如何去除光晕？

How to remove halo after click from buttons in Bootstrap?

html

css

jquery

button

twitter-bootstrap