我的按钮都有一个高亮后,我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?
我的按钮都有一个高亮后,我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?
当前回答
这是工作,希望能帮到你
.btn:focus, .btn:focus:active {
outline: none;
}
其他回答
.btn:focus:active {
outline: none;
}
这将在点击时删除轮廓,但在点击时保持焦点(对于a11y)
这样效果最好
.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
这是工作,希望能帮到你
.btn:focus, .btn:focus:active {
outline: none;
}
尝试这个解决方案删除按钮周围的边界。将此代码添加到css中。
Try
button:focus{
outline:0px;
}
如果不工作,然后使用下面。
button:focus{
outline:none !important;
}
我没有找到不破坏易用性或颠覆功能的可靠答案。
也许结合一些会更好地发挥整体作用。
<h1
onmousedown="this.style.outline='none';"
onclick="this.blur(); runFn(this);"
onmouseup="this.style.outline=null;"
>Hello</h1>
function runFn(thisElem){控制台.log(“你好”,thisElem);的