PostCSS What-Input

You need what-input enabled in your app in order to use this plugin.

This PostCSS plugin adds two new CSS pseudo selectors: :focus-mouse and :focus-keyboard.

The first will target focused elements only if they have been focused using mouse.
The other will target focused elements only if focused using keyboard.

This is particularly useful to disable the focus ring from elements only when the user is using the mouse or on first page load:

.MyInputElement:focus-mouse {
  outline: 0;
}