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

Question

When a user 'tabs over' to an input, I want the focus effect to be normally displayed, but on click, I don't want it to be visible.

User hits tab, now focussed on toggle button, I would like the toggle button to have slight glowing outline, which I'm currently able to do.

Now,

User clicks on the toggle button or it's associated label, toggle changes as usual, BUT, I want the glow to never appear in the first place, or to disappear as quickly as possible.

I know about .blur(), and right now I'm having to use a setTimeout for a lazy fix, but I'd like to know if there's a better way to accomplish this, or if there's possibly a CSS only solution

Answer 1

If you use the what-input.js plugin you can apply styles specifically for keyboard users. You can use the following code to highlight a button that has been tabbed to. I've found what-input to be a reliable plugin (comes bundled with Zurb Foundation) and is currently regularly maintained.

// scss
body[data-whatinput="keyboard"] {
  button {
    &:focus {
      // other highlight code here
      box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    }
  }
}

or

/* vanilla css */
body[data-whatinput="keyboard"] button:focus {
  box-shadow:  0 0 5px rgba(81, 203, 238, 1);
}