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

Possible duplicate of [Enable :focus only on keyboard use (or tab press)](https://stackoverflow.com/questions/31402576/enable-focus-only-on-keyboard-use-or-tab-press) — pretzelhammer, Jul 17 '18 at 05:02
You can combine both: `a:active:focus`, and also exclude one `a:focus:not(:active)`. — connexo, Jul 17 '18 at 05:06

לבני מלכה · Accepted Answer · 2018-07-17T06:13:43.693

2

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;
}

edited Jul 17 '18 at 06:13

answered Jul 17 '18 at 05:06

לבני מלכה

15,925
2
23
47

tell me for more help – לבני מלכה Jul 17 '18 at 05:07
1

I don't think JS is necessary for this. – connexo Jul 17 '18 at 05:13
for catch TAB click event, yes! but he/she can use the plugin – לבני מלכה Jul 17 '18 at 05:14
1

Why are you using jQuery inside your event listeners? Also, the usage of `keyCode` is discouraged. – connexo Jul 17 '18 at 05:18
Thanks, it does the trick. Eh I cant upvote you, not enough reputation. Will do when hit 15! Thanks again. – Jul 17 '18 at 05:19
It is fine happy to help:) – לבני מלכה Jul 17 '18 at 05:20
@connexo see my edit and feel free to edit my answer to improove it – לבני מלכה Jul 17 '18 at 05:21
MDN on `keyCode`: Deprecated This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode – connexo Jul 17 '18 at 05:23
I think use `event.which==9` is better . Am i right? – לבני מלכה Jul 17 '18 at 05:26
Why not read the docs? And no, you're even more wrong with `event.which`. – connexo Jul 17 '18 at 05:28
@connexo Thank you for bringing this to my attention.. I edited answer – לבני מלכה Jul 17 '18 at 06:14

score 0 · Answer 2 · answered Jul 17 '18 at 05:04

I think you might be this code here

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

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

2 Answers2