我希望实现这个效果:
http://getbootstrap.com/javascript/#popovers-examples - 滚动到“live Demo”并点击红色的popover按钮,在Mac OS X上的Chrome中...它非常完美漂亮。
然而,在我自己的代码中,它是蓝色的轮廓线,尽管我试了很多CSS方法来去除它!
在Safari和Firefox中看起来正确,但在Chrome中不行!
我看到.btn:focus
被描绘了一个outline
:
.btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
尝试将此更改为:
.btn:focus {
outline: none !important;
}
基本上,寻找任何在:focus
状态下的元素中出现的outline
属性 - 这就是导致此问题的原因。
更新 - 适用于Bootstrap v4:
.btn:focus {
box-shadow: none;
}
.btn:hover, .btn:focus {
outline: none;
text-decoration: none;
}
.btn {
outline: none;
text-decoration: none;
}
这些代码是否过于严格? - Shane HollomanFor any googlers like me, where..
.btn:focus {
outline: none;
}
如果在 Google Chrome 中仍然无法正常工作,则以下操作应完全消除任何按钮发光。
.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
outline: none;
}
.btn:focus, .btn:active, .btn:active:focus
。虽然你的回答指引了我正确的方向,所以谢谢! - Tom Manterfieldbox-shadow: none;
。 - Izhaki.btn:active:focus
可以解决在Chrome中点击按钮时短暂闪烁蓝色轮廓的问题。显然,至少在Chrome中,当你点击按钮时,:focus
和 :active
状态都会短暂激活,因此需要额外的选择器来解决这个问题。 - NerdCowboy.btn:focus, .btn:active:focus, .btn.active:focus{
outline:none;
box-shadow:none;
}
这应该会移除轮廓和框阴影
.btn:focus {
box-shadow: none;
}
使用 SCSS:
$btn-focus-box-shadow: none!important;
.btn.active
或.btn.focus
单独不能覆盖Bootstrap的样式。对于默认主题:
.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus,
.btn:active:focus, .btn:focus {
outline: none;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
box-shadow: none !important;
}
您可以在不进行额外CSS的情况下去除阴影。
通常添加一个像这样的按钮。
<button class="btn btn-primary">按钮</button>
您可以简单地添加 shadow-none
来去除轮廓线。
<button class="btn btn-primary shadow-none">按钮</button>
.btn {
outline: none !important;
}
#sec-one{padding: 15px 0;}
p{text-align: center;}
/*
* Change the color to any color you want;
* or set to none if you don't any outline at all.
*/
*:focus:not(a){
outline: 2px solid #f90d0e !important;
box-shadow: none !important;
}
<!doctype html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<section id="sec-one">
<div class="container">
<div class="row">
<div class="col">
<form>
<fieldset class="form-group">
<input type="text" class="form-control" placeholder="Full Name" required>
</fieldset>
<fieldset class="form-group">
<input type="email" class="form-control" placeholder="Email Address" required>
</fieldset>
<fieldset class="form-group">
<input type="submit" class="btn btn-default" value="Sign Up">
</fieldset>
</form>
</div>
</div>
</div>
</section>
</body>
</html>