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

Question

I use datatables from fluent kit and the pagination, when clicked (:active) is highlighted with:

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

I want it gone, but only when clicked. I want the effect to work only for the :focus done with keyboard, a TAB key. I don't think it is possible with CSS only. If it is, that's awesome. If not, javascript / jquery solution is acceptable.

Here's simplified example of the code:

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

Use TAB to change focus between the <a> links to see what I mean.

---

EDIT

As it is the external plugin, I don't want to use another HTML elements for that to work, like in Enable :focus only on keyboard use (or tab press).

Answer 1

On TAB click e.key === 'Tab' (or e.keyCode=9 in ASCI code)

Learn here:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Use this function:

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>

OR only by css

this plugin:https://github.com/ten1seven/track-focus in css:

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