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

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