如何从Bootstrap中的按钮单击后删除光环？

Question

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

我在这里看到了这个问题:https://stackoverflow.com/questions/22999328/how-to-remove-the-border-from-search-box-after-clicking 但唯一的答案是添加.yourbox:focus { border: 0 !important; }到样式表.我这样做并将"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;
}