css - Input effect on keyboard tab -> focus, but NOT on click -

when user 'tabs over' input, want focus effect displayed, on click, don't want visible.

user hits tab, focussed on toggle button, toggle button have slight glowing outline, i'm able do.

now,

user clicks on toggle button or it's associated label, toggle changes usual, but, want glow never appear in first place, or disappear possible.

i know .blur(), , right i'm having use settimeout lazy fix, i'd know if there's better way accomplish this, or if there's possibly css solution

i think lot of front-end developers struggle find balance between aesthetics , best-practices accessibility. seems great compromise.

here's how it. idea toggle outlining on when user uses tab key , turn off when click.

js

document.addeventlistener('keydown', function(e) {   if (e.keycode === 9) {     $('body').addclass('show-focus-outlines');   } });  document.addeventlistener('click', function(e) {   $('body').removeclass('show-focus-outlines'); }); 

styles

body:not(.show-focus-outlines) button:focus,  body:not(.show-focus-outlines) [tabindex]:focus {   outline: none; }