我在Bootstrap 3中工作并尝试删除按钮的阴影/轮廓。我目前的代码部分地执行了此操作。单击按钮时,轮廓仍会显示为瞬间。
以下是我codepen的链接。
.btn:active,
.btn:focus,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
答案 0 :(得分:5)
.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus {
outline: thin dotted;
outline-offset: -2px;
}
所以你需要重置它。 (!important
仅用于演示 - 请勿在开发代码中使用)
片段
.container-fluid {
text-align: center;
}
body .btn {
height: 170px;
width: 170px;
border-radius: 50% !important;
outline: 0 !important;
}
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
outline: 0 !important;
outline-offset: 0 !important;
background-image: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<p>result</p>
<div class="row">
<div class="col-sm-4">
<button class="btn">Rock</button>
</div>
<div class="col-sm-4">
<button class="btn">Paper</button>
</div>
<div class="col-sm-4">
<button class="btn">Scissors</button>
</div>
</div>
</div>
答案 1 :(得分:5)
目前尚未(尚未)记录,但Bootstrap 4.1支持添加类shadow-none
以删除阴影。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<p>Click both buttons below to see the difference:</p>
<button class="btn">Bootstrap button</button>
<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>
答案 2 :(得分:2)
更改此
的选择器.btn:active,
.btn:focus,
.btn.active,
.btn:active:focus {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
答案 3 :(得分:1)
添加此样式有助于
.btn:active:focus {
outline: 0;
}
答案 4 :(得分:0)
放置此片段,它将被修复。
.btn:active,
.btn:focus,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
outline: none !important;
}
答案 5 :(得分:0)
bootstrap 4
在我的情况下就够了:
.btn:focus{
box-shadow: none !important;
}
答案 6 :(得分:0)
<button class="btn btn-link currency-selector">Submit</button>
.currency-selector {
text-decoration: none !important;
}
.currency-selector:hover {
text-decoration: none !important;
}