我使用来自fluent kit的数据表和分页,当点击(:active
)时突出显示:
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
我希望它消失,但只有在点击时。我希望效果仅适用于:focus
使用键盘完成的TAB
按键。我认为仅使用 CSS 是不可能的。如果是的话,那就太棒了。如果没有,javascript / jquery 解决方案是可以接受的。
这是代码的简化示例:
.pagination {
padding: 20px;
}
.pagination a {
padding: 10px;
}
.pagination a:focus {
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.pagination a:active {
border: 1px solid black;
}
<div class="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
用于TAB
更改<a>
链接之间的焦点以了解我的意思。
编辑
因为它是外部插件,所以我不想使用其他 HTML 元素来工作,比如Enable :focus only on keyboard use (or tab press)。