删除 :active 和 :focus 上的大纲，但不删除 :focus 上的大纲

Question

我使用 datatables from fluent kit 和分页，点击时 (:active) 突出显示：

box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);

我希望它消失，但只有在单击时才会消失。我希望效果仅适用于使用键盘 TAB 键完成的 :focus。我认为仅 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 元素来实现它，例如 .

Answer 1

我想你可能是这里的代码

.pagination {
  padding: 20px;
}

.pagination a {
    padding: 10px;
    border: 1px solid transparent;
}

.pagination a:focus {
  outline:0;
  box-shadow: inherit;
}

.pagination a:active {
  border: 1px solid black;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

<div class="pagination">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>

Answer 2

在 TAB 上单击 e.key === 'Tab'（或 ASCI 代码中的 e.keyCode=9）

在这里学习：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

使用此功能：

document.addEventListener('keydown', function(e) {
  if (e.key === 'Tab') {
   console.log('tab is clicked!')
  }
});

.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>

或仅由 css

这个插件：https://github.com/ten1seven/track-focus 在css:

body[data-whatinput="keyboard"] a:focus {
  box-shadow:  0 0 5px red;
}

删除 :active 和 :focus 上的大纲，但不删除 :focus 上的大纲

Remove outline on :active & :focus but not on :focus only

html

javascript

css

fluent-kit