Html 删除按钮阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39210985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove Button Shadow
提问by Hudson Taylor
I am working in Bootstrap 3 and trying to remove the shadow/outline of my buttons. The code I have currently does this partially. The outline still appears for a split-second when the button is clicked.
我正在使用 Bootstrap 3 并尝试删除按钮的阴影/轮廓。我目前拥有的代码部分地做到了这一点。单击按钮时，轮廓仍会出现一瞬间。
Here is a link to my codepen.
这是我的codepen的链接。
.btn:active,
.btn:focus,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
采纳答案by dippas
you were missing this:
你错过了这个：
.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus {
outline: thin dotted;
outline-offset: -2px;
}
So you need to reset it. (!importantonly used for demo - DO NOT USE in your development code)
所以你需要重置它。（!important仅用于演示 - 请勿在您的开发代码中使用）
Snippet
片段
.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>回答by Philip Bijker
Currently not (yet) documented, but Bootstrap 4.1supports adding a class shadow-noneto remove a shadow.
目前（还）没有记录，但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>回答by Patryk K
bootstrap 4
引导程序 4
in my case it was enough:
就我而言，这就足够了：
.btn:focus{
box-shadow: none !important;
}
回答by Seba Maldonado
Change your selector for this
为此更改您的选择器
.btn:active,
.btn:focus,
.btn.active,
.btn:active:focus {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
回答by Geinmachi
Adding this style will help
添加此样式将有所帮助
.btn:active:focus {
outline: 0;
}
回答by kernal lora
Place this snippet, It will be fixed.
放置这个片段，它将被修复。
.btn:active,
.btn:focus,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
outline: none !important;
}
回答by Nitin Singh
<button class="btn btn-link currency-selector">Submit</button>
.currency-selector {
text-decoration: none !important;
}
.currency-selector:hover {
text-decoration: none !important;
}
